Object lookAt functionality.

[Johnathan-Aretos]

I'm trying to achieve the same functionality as this Codepen where I have an object and its purpose is to lookAt another object (vector position).

From my understanding the lookAt method on threejs will rotate the object to face the vector.

In JS this would be an example of the code.

const geometry = new THREE.CircleGeometry(2, 5);
const vector = new THREE.Vector3(0,1,0);
geometry.lookAt(vector);

But an having trouble replicating this behavior with react.

Rotations happen at the mesh level so would have thought lookAt would also operate there.

<mesh
  ref={meshRef}
  position={[0, 0.01, 0.4]}
  lookAt={new THREE.Vector3(6, 4, 5)} {** Also tried `[6,4,5]` **}
  {...props}
>
  <circleGeometry attach='geometry' args={[0.01, 12]} />
  <meshBasicMaterial side={THREE.DoubleSide} color={0x000fff} />
</mesh>

Any help would be appreciated

[Johnathan-Aretos]

I've figured out the answer to the question,

You need to use this in a useLayoutEffect hook

something like this

  const mesh = useRef(null)

  useLayoutEffect(() => {
    mesh.current.lookAt(0, 0, 0)
  }, [])

  return (
    <mesh ref={mesh} position={[0, 1, 1]} {...props}>
      <circleGeometry attach='geometry' args={[1, 12]} />
      <meshBasicMaterial side={THREE.DoubleSide} color={0x000fff} />
    </mesh>
  )

[drcmda]

yep, lookAt is a function, you tried to overwrite it with a vector before

you dont need the attach='geometry' btw