3d model look mouse cursor

hi, this is the first time I write in this forum … I’m quite a novice of three.js and in general of the world of javascript, I need a helping hand to understand why I can not make my 3d object follow the cursor when I move the mouse, like in this example https://codepen.io/interaktiv-ca/pen/XayZPx but without simulating the bite of the jaw and the eyes of the model. I’ve been on the internet for several days and I’ve come to this kind of code:


var camera = new THREE.PerspectiveCamera ( 50, window.innerWidth / window.innerHeight, 1, 1000 );

camera.position.z = 15;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);

document.body.appendChild ( renderer.domElement );

controls = new THREE.OrbitControls ( camera, renderer.domElement );


var target = new THREE.Vector3();

var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;


var loader = new THREE.ObjectLoader();
loader.load("/model/skull.json",function ( obj ) {

var box = new THREE.Box3().setFromObject ( obj );
var center = new THREE.Vector3();
box.getCenter( center );
obj.position.sub ( center );
obj.rotation.y = Math.PI;
scene.add ( obj );

});


function onDocumentMouseMove( event ) {

mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );

}


var animate = function () {
requestAnimationFrame( animate );

target.x += ( mouseX - target.x ) * .02;
target.y += ( - mouseY - target.y ) * .02;
target.z = camera.position.z; // assuming the camera is located at ( 0, 0, z );

object.lookAt( target );

renderer.render( scene, camera );
}

animate();

surely there’s some mistake I can not get on with …
Thank you for any answers or for any suggestions on where I could start

Crossposting:

I wrote there before asking here because already a user helped me and I hoped to have a slightly clearer answer in this case too. Unfortunately it did not happen for this reason I thought I would also write here since we only talk about Three.js in general here. I apologize for the crossposting

I’ve just added your post at stackoverflow so it’s easier to follow the whole discussion.

A working example with concept of how you can do it:

3 Likes

Ok thank you for this example, I think I’m on the right track … the only problem and that gives me an error in the console of this type: "object is not defined at HTMLCanvasElement.onMouseMove, i write this code based on the example:

var camera = new THREE.PerspectiveCamera ( 50, window.innerWidth / window.innerHeight, 1, 1000 );

camera.position.z = 15;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
var canvas = renderer.domElement;
document.body.appendChild ( canvas );

controls = new THREE.OrbitControls ( camera, renderer.domElement );

var loader = new THREE.ObjectLoader();
loader.load("/model/skull.json",function ( obj ) {

var box = new THREE.Box3().setFromObject ( obj );
var center = new THREE.Vector3();
box.getCenter( center );
obj.position.sub ( center );
obj.rotation.y = Math.PI;
scene.add ( obj );

});

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1); -10);
var raycaster = new THREE.Raycaster ();
var mouse = new THREE.Vector2();
var pointOfIntersection = new THREE.Vector3();
canvas.addEventListener("mousemove", onMouseMove, false);

function onMouseMove(event){
mouse.x = (event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / wndow.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
raycaster.ray.intersectPlane(plane, pointOfIntersection);
obj.lookAt(pointOfIntersection);
}

renderer.setAnimationLoop(() => {
if (resize(renderer)) {
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
renderer.render(scene, camera);
});

function resize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !|| height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
};

I still missing something?

Could you provide a live code example of what you try (jsfiddle, codepen etc.)?

I’m sorry I can not visualize the project inside codepen, I’ll try to make it work but I think it takes me some time, if it can help you here there are a photo that show the problem

36

And when i move the mouse around the wireframe the errors increase

Another option:

3 Likes

you saved me, another time … I only changed a couple of things in the code but it finally works, I really thank you for the support and for the patience

You’re welcome :slight_smile: :beers:

1 Like

Is it possible to do this using a Gltf or Glb model? I Can’t seem to get it to work. :neutral_face: