caméra
Jusqu'à présent, nous avons utilisé une caméra perspective PerspectiveCamera.
Il existe d'autres types de caméras.
- OrthographicCamera : https://threejs.org/docs/#api/en/cameras/OrthographicCamera (opens in a new tab)
- CubeCamera : https://threejs.org/docs/#api/en/cameras/CubeCamera (opens in a new tab)
- PerspectiveCamera : https://threejs.org/docs/#api/en/cameras/PerspectiveCamera (opens in a new tab)
- StereoCamera : https://threejs.org/docs/#api/en/cameras/StereoCamera (opens in a new tab)
OrbitControls
Pour déplacer la caméra, vous pouvez utiliser OrbitControls.
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
const controls = new OrbitControls(camera, canvas)
const animate = () => {
controls.update()
renderer.render(scene, camera)
requestAnimationFrame(animate)
}
Animer la caméra
const clock = new THREE.Clock()
const animate = () => {
const elapsedTime = clock.getElapsedTime()
camera.position.x = Math.sin(elapsedTime)
camera.position.z = Math.cos(elapsedTime)
camera.lookAt(mesh.position)
renderer.render(scene, camera)
requestAnimationFrame(animate)
}Event mouse
// Cursor
const cursor = {
x: 0,
y: 0
}
window.addEventListener('mousemove', (event) =>
{
cursor.x = event.clientX / sizes.width - 0.5
cursor.y = - (event.clientY / sizes.height - 0.5)
})
const animate = () => {
camera.position.x = cursor.x * 5
camera.position.y = cursor.y * 5
camera.lookAt(mesh.position)
renderer.render(scene, camera)
requestAnimationFrame(animate)
}