As the title says, the program uses threejs
code below:
const mouse = new THREE.Vector2();
const pointer = new THREE.Vector2();
window.addEventListener( 'mousemove', onMouseMove );
function onMouseMove(ev) {
mouse.x = ev.clientX / window.innerWidth;
mouse.y = ev.clientY / window.innerHeight;
ev.preventDefault();
pointer.x = (ev.clientX / window.innerWidth) * 2 - 1;
pointer.y = -(ev.clientY / window.innerHeight) * 2 + 1;
}
function animate() {
requestAnimationFrame(animate)
lightHandle()
operate()
render()
stats.update()
}
function render() {
camera.position.x = observer.x + v.x
camera.position.y = observer.y + v.y
camera.position.z = observer.z + v.z
camera.lookAt(observer)
renderer.render(scene, camera)
}
function operate() {
omega.x = .5 * Math.PI * (-mouse.x + .5)
omega.y = .5 * Math.PI * (mouse.y - .5)
omega.z = .5 * Math.PI * (mouse.x - .5)
v.x = Math.cos(theta.y + omega.y) * Math.sin(theta.x + omega.x) * .5
v.y = Math.sin(theta.y + omega.y) * .5
v.z = Math.cos(theta.y + omega.y) * Math.cos(theta.x + omega.x) * .5
}
function motion() {
theta.x = (theta.x + omega.x * .1) % (2 * Math.PI)
theta.y = (theta.y + omega.y * .1) % (2 * Math.PI)
theta.z = (theta.z + omega.z * .1) % (2 * Math.PI)
}
init()
animate()
Mouse movement animation will jump unnaturally like below
The animation in the video is not continuous
The following video :
https://drive.google.com/file/d/1fpFu89KlFGR-9zxzq1iqYdk60JPJKkxX/view?usp=sharing
animation display smooth and natural.