While updating the controls target to a object position its moving the object to center

Here, i have a multiple set of object. When I intersect to a object using raycaster I updated the controls target respective to the object so that the remaining objects can rotate respective to the intersected object as center. But what happening is that when I intersect the object and change the controls target it object which get intersected is moved to the center of the scene.Here, I have my custom mouse pointer zoom in event where I would have set the orbit controls zoom to false and would have added my event.

So, I have no idea why the object gets moves to the center of the scene when I update the controls target to the objects position.

Kindly, please help me out with the issue

    var container;
    var camera, scene, renderer;
    var controls;
    var zoomIn;
    var object;
    var mouseVector = new THREE.Vector3();
    var startMousePos = new THREE.Vector3();
    var intersectedPoint = new THREE.Vector3();
    var intersectedOffset = new THREE.Vector3();
    var raycaster = new THREE.Raycaster(); // create once
    var mouse = new THREE.Vector2(); // create once
    var intersects;
    var data;
    var center;
    init();
    animate();

    function init() {

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

        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.001, 500000);
        camera.position.z = 1000;

        scene = new THREE.Scene();
        console.log(scene)
        scene.background = new THREE.Color(0xf0f0f0);

        scene.add(new THREE.AmbientLight(0x505050));

        var light = new THREE.SpotLight(0xffffff, 1.5);
        light.position.set(0, 500, 2000);
        light.angle = Math.PI / 9;

        light.castShadow = true;
        light.shadow.camera.near = 1000;
        light.shadow.camera.far = 4000;
        light.shadow.mapSize.width = 1024;
        light.shadow.mapSize.height = 1024;
  
        scene.add(light);

        var geometry = new THREE.BoxBufferGeometry(20, 20, 20);
        // var zoomIn = document.getElementById('zoom-in');
        for (var i = 0; i < 200; i++) {

            object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));

            object.position.x = Math.random() * 1600 - 800;
            object.position.y = Math.random() * 900 - 450;
            object.position.z = Math.random() * 900 - 500;

            object.rotation.x = Math.random() * 2 * Math.PI;
            object.rotation.y = Math.random() * 2 * Math.PI;
            object.rotation.z = Math.random() * 2 * Math.PI;

            object.scale.x = Math.random() * 2 + 1;
            object.scale.y = Math.random() * 2 + 1;
            object.scale.z = Math.random() * 2 + 1;

            object.castShadow = true;
            object.receiveShadow = true;

            scene.add(object);

        }

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        window.addEventListener("mousemove", event => {
   
           mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
            mouse.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;

            if (!intersects) {
                return;
            } else {
             if (!data) {
                    return;
                } else {
                  var boundingBox = new THREE.Box3();
                    boundingBox.setFromObject(data[0].object);
                    var center = boundingBox.getCenter();
                    controls.target.copy(center);
                    console.log(center)
                    data = null;    
                }
             
            }
         
        });

        window.addEventListener("wheel", event => {
   
            var factor = 50;
            var factorIntersected = 15;
            var mX = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
            var mY = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
            var vector = new THREE.Vector3(mX, mY, 0.1);
            raycaster.setFromCamera(mouse, camera);

            intersects = raycaster.intersectObjects(scene.children);
            vector.unproject(camera);
            vector.sub(camera.position);

            if (intersects.length > 0) {
                intersectedPoint = intersects[0].point;
        
                data = intersects;
  
                if (event.deltaY < 0) {
                    camera.position.addVectors(camera.position, vector.setLength(factorIntersected));
                    controls.target.addVectors(controls.target, vector.setLength(factorIntersected));

                } else {
                    camera.position.subVectors(camera.position, vector.setLength(factorIntersected));
                    controls.target.subVectors(controls.target, vector.setLength(factorIntersected));
                }
       
            }
       
        });

        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFShadowMap;

        container.appendChild(renderer.domElement);
        controls = new THREE.OrbitControls(camera, renderer.domElement, renderer, scene);
        controls.enableRotate = true;
        controls.enablePan = true;
        controls.enableZoom = false;
    
        window.addEventListener('resize', onWindowResize, false);


    }

    function onZoomIn(e) {
     
    }

    function mouseWheel(event) {


        let x = 2 * event.clientX / window.innerWidth - 1;
        let y = 1 - 2 * event.clientY / window.innerHeight;
        let cursorpos = new THREE.Vector3(x, y, 1);

        cursorpos.unproject(camera);
        //focus on the mouse cursor
        let dir = new THREE.Vector3().copy(cursorpos).sub(camera.position).normalize();

        //pasue

        let dist = "some formula add"
        let shift = new THREE.Vector3().copy(dir).multiplyScalar(dist * 0.1);

        camera.position.add(shift);
        controls.position0.add(shift);
        controls.target.add(shift);

    }
    function onWindowResize() {

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

    }

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        render();

    }

    function render() {
        renderer.render(scene, camera);

    }


    document.addEventListener('mouseup', function (event) {
        onZoomIn();
    
    });
1 Like

Hi!

It doesn’t. The camera turns to the control’s target’s location. That’s what .target property of controls intended for. Camera always look at it. And target’s default value is the center of your scene (0, 0, 0).

5 Likes

Thanks a lot Sir @prisoner849. Thanks for your valuable time! Can you suggest me how to achieve my requirement? That would be very helpful