Как "игнорировать" вращение камеры при движении объекта в сторону курсора?
Нужно чтобы 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>