init() {
    // set up renderer and attach the dom ele
    this.renderer = new THREE.WebGLRenderer()
    this.renderer.setPixelRatio(window.devicePixelRatio)
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    this.mount.appendChild(this.renderer.domElement)

    // outline
    this.effect = new OutlineEffect(this.renderer)

    this.scene = new THREE.Scene()

    // camera stuff

    this.camera = new THREE.PerspectiveCamera(
      55,
      window.innerWidth / window.innerHeight,
      1,
      20000
    )
    this.camera.position.set(30, 30, 100).multiplyScalar(10)
    this.camera.lookAt(130, 10, 0)

    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    this.controls.target.set(130, 10, 0)
    this.controls.update()

    // light
    this.light = new THREE.DirectionalLight(0xffffff, 20)
    this.scene.add(this.light)

    this.topLight = new THREE.DirectionalLight(0xffffff, 0.5)
    this.topLight.position.set(0, 380, 300)
    this.scene.add(this.topLight)

    // water
    var waterGeometry = new THREE.PlaneBufferGeometry(10000, 8000)
    this.water = new Water(waterGeometry, {
      textureWidth: 512,
      textureHeight: 512,
      waterNormals: new THREE.TextureLoader().load(
        'assets/3D/textures/waternormals.jpg',
        function(texture) {
          texture.wrapS = texture.wrapT = THREE.RepeatWrapping
        }
      ),
      alpha: 1.0,
      sunDirection: this.light.position.clone().normalize(),
      sunColor: 0xffffff,
      waterColor: 0x001e0f,
      distortionScale: 3.7,
      fog: this.scene.fog !== undefined
    })
    this.water.rotation.x = -Math.PI / 2
    this.water.translateX(-1000)
    this.water.translateY(3000)
    this.scene.add(this.water)

    // Skybox
    this.sky = new Sky()

    const uniforms = this.sky.material.uniforms

    uniforms['turbidity'].value = 10
    uniforms['rayleigh'].value = 2
    uniforms['luminance'].value = 1
    uniforms['mieCoefficient'].value = 0.005
    uniforms['mieDirectionalG'].value = 0.8

    // to control the sun in update sun
    this.sunInfo = {
      distance: 400,
      inclination: 1.75,
      azimuth: 0.205
    }

    // cube camera
    this.cubeCamera = new THREE.CubeCamera(0.1, 1, 512)
    this.cubeCamera.renderTarget.texture.generateMipmaps = true
    this.cubeCamera.renderTarget.texture.minFilter =
      THREE.LinearMipmapLinearFilter
    this.scene.background = this.cubeCamera.renderTarget

    // init the sun with default above
    this.updateSun()
    this.initBoat()
  }
/**
   * gets all the three js stuff ready
   */
gets all the three js stuff ready
gets all the three js stuff ready
init() {
    this.renderer = new THREE.WebGLRenderer()
    this.renderer.setPixelRatio(window.devicePixelRatio)
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    this.mount.appendChild(this.renderer.domElement)
    this.effect = new OutlineEffect(this.renderer)
    this.scene = new THREE.Scene()
    this.camera = new THREE.PerspectiveCamera(
      55,
      window.innerWidth / window.innerHeight,
      1,
      20000
    )
    this.camera.position.set(30, 30, 100).multiplyScalar(10)
    this.camera.lookAt(130, 10, 0)
    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    this.controls.target.set(130, 10, 0)
    this.controls.update()
    this.light = new THREE.DirectionalLight(0xffffff, 20)
    this.scene.add(this.light)
    this.topLight = new THREE.DirectionalLight(0xffffff, 0.5)
    this.topLight.position.set(0, 380, 300)
    this.scene.add(this.topLight)
    var waterGeometry = new THREE.PlaneBufferGeometry(10000, 8000)
    this.water = new Water(waterGeometry, {
      textureWidth: 512,
      textureHeight: 512,
      waterNormals: new THREE.TextureLoader().load(
        'assets/3D/textures/waternormals.jpg',
        function(texture) {
          texture.wrapS = texture.wrapT = THREE.RepeatWrapping
        }
      ),
      alpha: 1.0,
      sunDirection: this.light.position.clone().normalize(),
      sunColor: 0xffffff,
      waterColor: 0x001e0f,
      distortionScale: 3.7,
      fog: this.scene.fog !== undefined
    })
    this.water.rotation.x = -Math.PI / 2
    this.water.translateX(-1000)
    this.water.translateY(3000)
    this.scene.add(this.water)
    this.sky = new Sky()
    const uniforms = this.sky.material.uniforms
    uniforms['turbidity'].value = 10
    uniforms['rayleigh'].value = 2
    uniforms['luminance'].value = 1
    uniforms['mieCoefficient'].value = 0.005
    uniforms['mieDirectionalG'].value = 0.8
    this.sunInfo = {
      distance: 400,
      inclination: 1.75,
      azimuth: 0.205
    }
    this.cubeCamera = new THREE.CubeCamera(0.1, 1, 512)
    this.cubeCamera.renderTarget.texture.generateMipmaps = true
    this.cubeCamera.renderTarget.texture.minFilter =
      THREE.LinearMipmapLinearFilter
    this.scene.background = this.cubeCamera.renderTarget
    this.updateSun()
    this.initBoat()
  }
init ( ) { this . renderer = new THREE . WebGLRenderer ( ) this . renderer . setPixelRatio ( window . devicePixelRatio ) this . renderer . setSize ( window . innerWidth , window . innerHeight ) this . mount . appendChild ( this . renderer . domElement ) this . effect = new OutlineEffect ( this . renderer ) this . scene = new THREE . Scene ( ) this . camera = new THREE . PerspectiveCamera ( 55 , window . innerWidth / window . innerHeight , 1 , 20000 ) this . camera . position . set ( 30 , 30 , 100 ) . multiplyScalar ( 10 ) this . camera . lookAt ( 130 , 10 , 0 ) this . controls = new OrbitControls ( this . camera , this . renderer . domElement ) this . controls . target . set ( 130 , 10 , 0 ) this . controls . update ( ) this . light = new THREE . DirectionalLight ( 0xffffff , 20 ) this . scene . add ( this . light ) this . topLight = new THREE . DirectionalLight ( 0xffffff , 0.5 ) this . topLight . position . set ( 0 , 380 , 300 ) this . scene . add ( this . topLight ) var waterGeometry = new THREE . PlaneBufferGeometry ( 10000 , 8000 ) this . water = new Water ( waterGeometry , { textureWidth : 512 , textureHeight : 512 , waterNormals : new THREE . TextureLoader ( ) . load ( 'assets/3D/textures/waternormals.jpg' , function ( texture ) { texture . wrapS = texture . wrapT = THREE . RepeatWrapping } ) , alpha : 1.0 , sunDirection : this . light . position . clone ( ) . normalize ( ) , sunColor : 0xffffff , waterColor : 0x001e0f , distortionScale : 3.7 , fog : this . scene . fog !== undefined } ) this . water . rotation . x = - Math . PI / 2 this . water . translateX ( - 1000 ) this . water . translateY ( 3000 ) this . scene . add ( this . water ) this . sky = new Sky ( ) const uniforms = this . sky . material . uniforms uniforms [ 'turbidity' ] . value = 10 uniforms [ 'rayleigh' ] . value = 2 uniforms [ 'luminance' ] . value = 1 uniforms [ 'mieCoefficient' ] . value = 0.005 uniforms [ 'mieDirectionalG' ] . value = 0.8 this . sunInfo = { distance : 400 , inclination : 1.75 , azimuth : 0.205 } this . cubeCamera = new THREE . CubeCamera ( 0.1 , 1 , 512 ) this . cubeCamera . renderTarget . texture . generateMipmaps = true this . cubeCamera . renderTarget . texture . minFilter = THREE . LinearMipmapLinearFilter this . scene . background = this . cubeCamera . renderTarget this . updateSun ( ) this . initBoat ( ) }
gets all the three js stuff ready
gets all the three js stuff ready
// set up renderer and attach the dom ele // outline // camera stuff // light // water // Skybox // to control the sun in update sun // cube camera // init the sun with default above