It seems that despite my efforts, I am struggling with this task as I am relatively new to it. Surprisingly, I am not getting any errors in Dreamweaver.

I've started fresh by integrating the look at function with the OBJ loader, camera, and lights in my current example.

While I believe I have a decent grasp of what the code is doing, it's still not functioning as expected. My assumption is that the issue lies in the code for window resizing. The look at function does not seem to adjust for this, causing it to fail as it assumes a fixed window size. Is my analysis of the situation correct?

Additionally, I'm uncertain if the two commented lines in the obj loader are necessary: object.rotateX(Math.PI / 2); and object.lookAt(new THREE.Vector3(0, 0, 0));. Are these lines just setting the initial position? Reintroducing these lines would simply rotate the object to an initial pose without adjusting it relative to the mouse position.

I'm struggling to identify the source of the conflict in my code.

Below is the updated code:

<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>