Having problems trying to change controls.target

Questions
1

When i try to set controls.target to a position of an intersected object after raycasting it doesn’t work:
if(intersects.length > 0) {
controls.target = intersects[0].object.position;
camera.lookAt(intersects[0].object.position;
}

It does work for some reason if i use intersects[0].point instead:
if(intersects.length > 0) {
controls.target = intersects[0].point;
camera.lookAt(intersects[0].point);
}

2

Try it like so:

controls.target.copy( intersects[0].object.position );
controls.update();

When using OrbitControls, there is no need to call lookAt().

1 Like
3

Nope, nothing happens. Here’s all of the code, if that’s gonna help:

<html>

<head>
    <title>Three.js Crash Course</title>

    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
        }

        ;
    </style>
</head>

<body>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>

    <script>
        var scene = new THREE.Scene();
        const raycaster = new THREE.Raycaster();
        const pointer = new THREE.Vector2();

        var camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 20000 );
        camera.position.set( 1, 1, 20 );

        var renderer = new THREE.WebGLRenderer({ alpha: false });
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        window.addEventListener('resize', function () {
            var width = window.innerWidth;
            var height = window.innerHeight;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        });
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enablePan = false;
		controls.enableDamping = true;
        controls.maxDistance = 17;
		controls.minPolarAngle = 0.8;
		controls.maxPolarAngle = 2.4;
		controls.dampingFactor = 0.07;
		controls.rotateSpeed = 0.3;

        var ambientLight = new THREE.AmbientLight( 0xcccccc );
        scene.add( ambientLight );

        var loader = new THREE.GLTFLoader();

        loader.load(
            './earth.glb',
            function (gltf) {
                var object = gltf.scene;
                console.log(object);
                gltf.scene.scale.set( 0.005, 0.005, 0.005 );			   
	            gltf.scene.position.x = 0;				    
                gltf.scene.position.y = 0;				    
	            gltf.scene.position.z = 0;

	            scene.add( gltf.scene );
                controls.target = object.position;
            },
            function (xhr) {

                console.log((xhr.loaded / xhr.total * 100) + '% loaded');

            },
            function (error) {

                console.log('An error happened');

            }
        );
        loader.load(
            './mercury.glb',
            function (gltf) {
                var object = gltf.scene;
                console.log(object);
                gltf.scene.scale.set( 0.005, 0.005, 0.005 );			   
	            gltf.scene.position.x = 10;				    
                gltf.scene.position.y = 0;				    
	            gltf.scene.position.z = 0;

	            scene.add( gltf.scene );
            },
            function (xhr) {

                console.log((xhr.loaded / xhr.total * 100) + '% loaded');

            },
            function (error) {

                console.log('An error happened');

            }
        );

        var directionalLight = new THREE.DirectionalLight( 0xffffff );
        directionalLight.position.set( 0, 1, -1 ).normalize();
        scene.add( directionalLight );		

        function ondblclick(event){
            pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
            raycaster.setFromCamera( pointer, camera );
            const intersects = raycaster.intersectObjects( scene.children );

            if(intersects.length > 0) {
                controls.target.copy( intersects[0].object.position );
                controls.update();
            }
        }

        var update = function () {
        };

        var render = function () {
            renderer.render(scene, camera);
        };

        window.addEventListener( 'dblclick', ondblclick );

        var GameLoop = function () {
            requestAnimationFrame(GameLoop);
            update();

            controls.update();
            render();
        };

        GameLoop();
    </script>
</body>

</html>
4

Can you please share your code as a live example?

5

I solved it! Still don’t really understand why this works, but it does!
Just had to change…

if(intersects.length > 0) {
    controls.target = intersects[0].point;
    camera.lookAt(intersects[0].point);
}

…with this:

if(intersects.length > 0) {
    var pos = new THREE.Vector3();
    intersects[0].object.getWorldPosition(pos);
    controls.target = pos;
}