Orbit controls doesnt look at my object on click

Questions
1

Hello ! Im trying to implement a method that focused an object when I click on it. I create a raycaster that get the object of my click and then I try to target the position of the first element of my raycaster (the first element is always the nearest). But It doesnt work my camera still focus my character

focusedObject()

{

    document.addEventListener('click', (event) => {

        this.height =  this.main.sizes.height

        this.width =  this.main.sizes.width

        const focusCamera = new THREE.PerspectiveCamera( 45, this.width / this.height, 1, 1000 );

        this.scene.add( focusCamera );

        const mouse = new THREE.Vector2();

       

        var x = event.clientX

        var y = event.clientY

        mouse.x = ( x / this.width ) * 2 - 1;

        mouse.y = - ( y / this.height ) * 2 + 1;

       

        this.raycaster.setFromCamera(mouse, this.camera.instance);

        this.intersectsFocus = this.raycaster.intersectObjects(this.scene.children);

        this.camera.controls.target.set(this.intersectsFocus[0].object.position.x,this.intersectsFocus[0].object.position.y,this.intersectsFocus[0].object.position.z)                  

    })

I tried controls.target.set(…) and camera.lookAt(…) but no one works.

Thanks for helping :slight_smile:

2

Try passing only the objects position, or just the position property like this:

this.camera.controls.target.set(this.intersectsFocus[0].object.position);

The parameter of the function is an instance on Vector3 , or essentially an object with the x, y, z properties defined like this {x: , y:, z:} if that makes it easier.

3

Thanks for helping, I tried to pass the object.position as you recommand but it doesnt work. (I log the position it is correct but on click the camera doesnt focus any object and continue focusing my character). I guess I am missing something but what ???

4

I am on the right track. I had to play with the camera.controls.update() to focus one thing at a time. Anyone of you know how to decrease the speed of the camera ? It looks like the camera focused INSTANTLY an object then INSTANTLY another. I would like it to be smooth. Thanks for help @Kid2_Madhi @Mugen87

5

Use TWEEN.js; its a third party library but it works really well with three.js.