Как "игнорировать" вращение камеры при движении объекта в сторону курсора?

Нужно чтобы pointLight двигался в сторону курсора как будто камера не вращается. Понятно, что можно крутить только кубик, но мне интересен вариант именно с вращающейся камерой.

class Sketch {
  constructor() {
    this.bind()
    this.renderer()
    this.camera()
    this.scene()
    this.cube()
    this.lights()
    this.mouse()
    this.resize()
    this.listen()
  }
  
  bind() {
    this.render = this.render.bind(this)
    this.resize = this.resize.bind(this)
    this.mousemove = this.mousemove.bind(this)
  }
  
  renderer() {
    this.renderer = new THREE.WebGLRenderer()
    document.body.appendChild( this.renderer.domElement )
  }
  
  camera() {
    this.camera = new THREE.PerspectiveCamera( 0, 0, 0.1, 2000 )
    this.camera.position.z = 1000
  }
  
  scene() {
    this.scene = new THREE.Scene()
  }
  
  cube() {
    const geometry = new THREE.BoxGeometry( 1, 1, 1 )
    const material = new THREE.MeshStandardMaterial( { color: 'grey' } )
    this.cube = new THREE.Mesh( geometry, material )
    this.cube.rotation.y = 0.5
    this.cube.rotation.x = 0.5
    this.scene.add(this.cube)
  }
  
  lights() {
    this.ambientLight = new THREE.AmbientLight( 'white', 0.2)
    this.scene.add( this.ambientLight )
  
    this.pointLight = new THREE.PointLight( 'red', 1, 1000 )
    this.pointLight.position.set( 0, 0, 3 )
    this.scene.add( this.pointLight )
    this.scene.add( new THREE.PointLightHelper(this.pointLight, 0.1))
  }
  
  resize() {
    this.renderer.setSize(innerWidth, innerHeight)
        this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
    this.camera.aspect = innerWidth / innerHeight
    this.camera.fov = 2 * Math.atan((innerHeight / 2) / 1000) * (180 / Math.PI)
    this.camera.updateProjectionMatrix()
    this.cube.scale.set(150, 150, 150)
    this.pointLight.scale.set(150, 150, 150)
  }
  
  mouse() {
    this.mouse = new THREE.Vector2()
  }
  
  mousemove(event) {
    this.mouse.x = (event.clientX / innerWidth) * 2 - 1
    this.mouse.y = (event.clientY / innerHeight) * -2 + 1
  }
  
  listen() {
    addEventListener('resize', this.resize)
    addEventListener('mousemove', this.mousemove)
    requestAnimationFrame(this.render)
  }
  
  render(t) {
    requestAnimationFrame(this.render)
    
    t = t * 0.001

    this.camera.position.x = Math.cos(t) * ((innerWidth+innerHeight)/2)
    this.camera.position.z = Math.sin(t) * ((innerWidth+innerHeight)/2)

    this.camera.lookAt(0, 0, 0)
    
    this.pointLight.position.x = this.mouse.x * (innerWidth/2)
    this.pointLight.position.y = this.mouse.y * (innerHeight/2)
    
    this.renderer.render(this.scene, this.camera)
  }
}

new Sketch()
body {
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

class Sketch {
  constructor() {
    this.bind()
    this.renderer()
    this.camera()
    this.scene()
    this.cube()
    this.lights()
    this.mouse()
    this.resize()
    this.listen()
  }

  bind() {
    this.render = this.render.bind(this)
    this.resize = this.resize.bind(this)
    this.mousemove = this.mousemove.bind(this)
  }

  renderer() {
    this.renderer = new THREE.WebGLRenderer()
    document.body.appendChild(this.renderer.domElement)
  }

  camera() {
    this.camera = new THREE.PerspectiveCamera(0, 0, 0.1, 2000)
    this.camera.position.z = 1000
  }

  scene() {
    this.scene = new THREE.Scene()
  }

  cube() {
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshStandardMaterial({
      color: 'grey'
    })
    this.cube = new THREE.Mesh(geometry, material)
    this.cube.rotation.y = 0.5
    this.cube.rotation.x = 0.5
    this.scene.add(this.cube)
  }

  lights() {
    this.ambientLight = new THREE.AmbientLight('white', 0.2)
    this.scene.add(this.ambientLight)

    this.pointLight = new THREE.PointLight('red', 1, 1000)
    this.pointLight.position.set(0, 0, 3)
    this.scene.add(this.pointLight)
    this.scene.add(new THREE.PointLightHelper(this.pointLight, 0.1))
  }

  resize() {
    this.renderer.setSize(innerWidth, innerHeight)
    this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
    this.camera.aspect = innerWidth / innerHeight
    this.camera.fov = 2 * Math.atan((innerHeight / 2) / 1000) * (180 / Math.PI)
    this.camera.updateProjectionMatrix()
    this.cube.scale.set(150, 150, 150)
    this.pointLight.scale.set(150, 150, 150)
  }

  mouse() {
    this.mouse = new THREE.Vector2()
  }

  mousemove(event) {
    this.mouse.x = (event.clientX / innerWidth) * 2 - 1
    this.mouse.y = (event.clientY / innerHeight) * -2 + 1
  }

  listen() {
    addEventListener('resize', this.resize)
    addEventListener('mousemove', this.mousemove)
    requestAnimationFrame(this.render)
  }

  render(t) {
    requestAnimationFrame(this.render)

    this.pointLight.position.x = this.mouse.x * (innerWidth / 2)
    this.pointLight.position.y = this.mouse.y * (innerHeight / 2)

    this.renderer.render(this.scene, this.camera)
  }
}

new Sketch()
body {
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>


Ответы (0 шт):