three.js - object look at mouse

Question

Ok I understand it seems I did not try hard enough but I am really new to this and I get no errors what so ever in Dreamweaver.

I deleted my old example and this is what I have now, trying to integrate the look at function with the OBJ loader, camera and lights.

I think I understand what is happening more or less in the code, but it's still not working, I assume it's because there is a code for window resize but the look at function dose not take that into account, thus it's not working since the function assume a fixed window size, Am I right here?

Also I am not sure I need the two commented lines in the obj loader object.rotateX(Math.PI / 2); and object.lookAt(new THREE.Vector3(0, 0, 0)); since this is just to get the starting position? if I put these tow lines back, it will just rotate the object into an initial pose but the object will not turn relative to mouse position.

I am really not sure what is conflicting here

I changed the code now to this:

<script>

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

var camera, scene;
var canvasRenderer, webglRenderer;

var container, mesh, geometry, plane;

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

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1500);
    camera.position.x = 0;
    camera.position.z = 100;
    camera.position.y = 0;
    camera.lookAt({
        x: 0,
        y: 0,
        z: 0,
    });

    scene = new THREE.Scene();

    // LIGHTS
    scene.add(new THREE.AmbientLight(0x666666, 0.23));

    var light;

    light = new THREE.DirectionalLight(0xffc1c1, 2.20);
    light.position.set(0, 100, 0);
    light.position.multiplyScalar(1.2);

    light.castShadow = true;
    light.shadowCameraVisible = true;

    light.shadowMapWidth = 512;
    light.shadowMapHeight = 512;

    var d = 50000;

    light.shadowCameraLeft = -d;
    light.shadowCameraRight = d;
    light.shadowCameraTop = d;
    light.shadowCameraBottom = -d;

    light.shadowcameranear = 0.5;
    light.shadowCameraFar = 1000;
    //light.shadowcamerafov = 30;
    light.shadowDarkness = 0.1;

    scene.add(light);

    var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath( 'model/' );
                mtlLoader.load( 'rope.mtl', function( materials ) {
                    materials.preload();
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials( materials );
                    objLoader.setPath( 'model/' );
                    objLoader.load( 'rope.obj', function ( object ) {

            var positionX = 0;
            var positionY = 0;
            var positionZ = 0;

          object.position.x = positionX;
          object.position.y = positionY;
          object.position.z = positionZ;
          object.scale.x = 1;
          object.scale.y = 1;
          object.scale.z = 1;
          //object.rotateX(Math.PI / 2);

          //object.lookAt(new THREE.Vector3(0, 0, 0));

          // castshow setting for object loaded by THREE.OBJLoader()
          object.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
              child.castShadow = true;
              child.receiveShadow = true;
            }
          });

          scene.add(object);
            });
        });



    // RENDERER
    //webglRenderer = new THREE.WebGLRenderer();
    webglRenderer = new THREE.WebGLRenderer({
    antialias: true
    });
    webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    webglRenderer.domElement.style.position = "relative";
    webglRenderer.shadowMapEnabled = true;
    webglRenderer.shadowMapSoft = true;
    //webglRenderer.antialias: true;

    container.appendChild(webglRenderer.domElement);
    window.addEventListener('resize', onWindowResize, false);
}

window.addEventListener("mousemove", onmousemove, false);

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 0), 0);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersectPoint = new THREE.Vector3();

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

function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    webglRenderer.setSize(window.innerWidth, window.innerHeight);
}


function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {
    camera.lookAt(scene.position);
    webglRenderer.render(scene, camera);
}

    </script>

Answer 1

I took your code and adapted so it doesn't require a obj and put it into this codepen . The main problem seems to be that your intersection plane was defined incorrectly. The first argument is the normal vector which needs to be of length 1. Yours is 0. Therefore there are no meaningful intersections.

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 0), 0);

If you change it to

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 10);

the intersections are more meaningful and the object actually rotates.