I’m trying to get an eventlistener MouseMove to work. At the moment the event is responding to mousemoves but not how it should. Since I’m very new to all this I made mistakes in the code, I just have no idea what I did wrong exactly so hopefully someone here can point me in the right direction.
Here is the effect that I would like to achieve: three.js examples
And here is how I set it up:
//Variables for setup
let container, stats;
let camera, renderer, scene, bottle;
let mouseX = 0, mouseY = 0;
let targetX = 0, targetY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.querySelector("#bottle");
//Create scene
scene = new THREE.Scene();
const fov = 60
const aspect = container.clientWidth / container.clientHeight;
const near = 0.01;
const far = 500;
//Camera setup
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, -0.2, 2);
const ambient = new THREE.AmbientLight(0x404040, 100);
scene.add(ambient);
const lightpoint1 = new THREE.PointLight(0xc4c4c4,10);
lightpoint1.position.set(0,300,500);
scene.add(lightpoint1);
const lightpoint2 = new THREE.PointLight(0xc4c4c4,10);
lightpoint2.position.set(500,100,0);
scene.add(lightpoint2);
const lightpoint3 = new THREE.PointLight(0xc4c4c4,10);
lightpoint3.position.set(0,100,-500);
scene.add(lightpoint3);
const lightpoint4 = new THREE.PointLight(0xc4c4c4,10);
lightpoint4.position.set(-500,300,500);
scene.add(lightpoint4);
const light = new THREE.DirectionalLight(0xffffff, 5);
light.position.set(0, 1, 0);
light.castShadow = true;
scene.add(light);
//Renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
stats = new Stats();
//container.appendChild( stats.dom );
document.addEventListener( 'mousemove', onDocumentMouseMove );
//Load Model
let loader = new THREE.GLTFLoader();
loader.load("https://mywebsite/wp-content/uploads/2021/04/1FinalBrain-1.glb", function(gltf) {
scene.add(gltf.scene);
bottle = gltf.scene.children[0];
gltf.scene.scale.set(3.5, 3.5, 3.5);
animate();
});
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render(){
camera.position.x += ( mouseX - camera.position.x )*0.05;
camera.position.y += ( - mouseY - camera.position.y )*0.05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
init();
function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
}
window.addEventListener("resize", onWindowResize);
What is happening, the model loads normally but as soon as the mouse is moved the model moves over the Z axis to the background where it kinda unpredictable wiggles around. I already tried many thing but without success.
Hopefully someone can point me in the right direction.
Thanks in advance.