Object looking at the opposite side of mouse pointer

Questions
1

I have an .obj with its .mtl imported in my canvas, It’s a face 3d model and I want it to look at the mouse pointer as this one moves. I’m pretty close to achieve this I think. The object moves but to the other direction, so if I move my pointer up face object goes down, if I move left face goes right and so forth…

I tried to play around with mouse 2d coordinates inside the event listener function, figuring that could be the issue but I couldn’t find a solution. Can someone point me towards the issue here?

Here’s my code:

// Create a scene
const scene = new THREE.Scene();
// Create a camera
const camera = new THREE.PerspectiveCamera(
    100,
    window.innerWidth/window.innerHeight,
    0.1,
    1000
);
// Moves the camera closer/further
camera.position.set(0, 0, 20);

// Import WebGL renderer
const renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
});

// Set color and size of the renderer
renderer.setClearColor('#e5e5e5');
renderer.setSize(
    window.innerWidth,
    window.innerHeight
);
// Append renderer to the body element
let canvas = renderer.domElement;
document.body.appendChild(canvas);

// Resizing canvas within browser's window responsive
window.addEventListener('resize', () =>{
    renderer.setSize(
        window.innerWidth,
        window.innerHeight
    );
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
});

// Light Setup
let light = new THREE.PointLight(0xFFFFFF, 1, 500);
light.position.set(10, 0 ,25);
scene.add(light);

let ambient = new THREE.AmbientLight(0xB1B1B1, 0.2)
scene.add(ambient);


// LOADING OBJ
let obj;

let mtlloader = new THREE.MTLLoader();
mtlloader.load(
    'facciona_test.mtl',
    function(materials){

        materials.preload();

        //Load the object
        let objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.load(
            'facciona_test.obj',
            function(object){
                obj = object;
                object.position.z -= 290;
                object.rotation.x = -50;
                object.rotation.y = 550;
                scene.add(object);
            }
        );
    }
);

// MOUSE CONTROLS
let plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 1000);
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let pointOfIntersection = new THREE.Vector3();
canvas.addEventListener("mousemove", onMouseMove, false);

function onMouseMove(event){
    event.preventDefault();

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


let render = function(){
    requestAnimationFrame(render);
    // Spinning object
    // obj.rotation.y +=s 0.01;
    renderer.render(scene, camera);
}
render();
2

What happens if you turn the mouse screen coordinates around?

E.g. change:

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

to this:

    mouse.x = (event.clientX / window.innerWidth) * 2 + 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 - 1;
1 Like
3

Wow! You gave me a great help! I also had to switch minus sign like so to make it work the way I wanted:

mouse.x = -(event.clientX / window.innerWidth) * 2 + 1;
mouse.y = (event.clientY / window.innerHeight) * 2 - 1;

The math behind those coordinates were the only part of my code I couldn’t really understand, it was literally a copy paste from three.js documentation. Would you bother give me an explanation of how this work?
Thanks a lot

4

I’ll give it a shot.

The screen space coordinates stored in the mouse vector range between -1 and 1. So <0, 0> is the center of the screen. The formula there simply translates the mouse coordinates in pixels (e.g. ranging from 0 to 1920 horizontally and 0 to 1080 vertically) to a normalized vector that ranges between -1 and 1.

By shifting the operands around, you basically tell it to use an “inverse axis” like you see in some games. For example flight games often give you the option to invert the Y-axis to simulate a joystick where you pull down to look up instead of the other way around.

1 Like