Camera won't look at object despite camera.lookAt()

Questions
, , , ,
1

I have a function HoverableCube that creates a transparent cube that the code interacts with. The parameters for Hoverable cube are:
position(3d vector), rotation (3d vector), scale(size), moveTo (where the camera moves to), setLastCameraPosition.

I want the camera to look at position when clicked, but the camera always looks at (0,0,0). even with camera.lookAt(position[0], position[1], position[2])

function HoverableCube({ position, rotation, scale, moveTo, setLastCameraPosition }) {
  const [hovered, setHovered] = useState(false)
  const { camera } = useThree()

  const handleClick = () => {
    console.log('cube click. Moving to:', moveTo)

    // for reset button
    setLastCameraPosition([camera.position.x, camera.position.y, camera.position.z])

    // camera transition to x,y,z
    gsap.to(camera.position, {
      x: moveTo[0],
      y: moveTo[1],
      z: moveTo[2],
      duration: 1.5,
      ease: 'power2.out',
    })

    // Where i'm having issues with. Camera won't look at the position.
    camera.lookAt(position[0], position[1], position[2])
  }

  return (
    <group>
      {/* Main Cube */}
      <mesh
        castShadow
        receiveShadow
        position={position}
        rotation={rotation}
        scale={scale}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
        onClick={handleClick} // camera click move 
      >
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="blue" transparent opacity={0.01} />
      </mesh>

      {/* White Outline on Hover */}
      {hovered && (
        <lineSegments position={position} rotation={rotation} scale={scale}>
          <edgesGeometry attach="geometry" args={[new THREE.BoxGeometry(1, 1, 1)]} />
          <lineBasicMaterial attach="material" color="white" linewidth={1} />
        </lineSegments>
      )}
    </group>
  )
}

It’s usage in App()

 <HoverableCube
            position={[6.67, -1.2, 4.5]} // location 
            rotation={[Math.PI / 2, 0, -0.391]}
            scale={[1.5, 1.5, 1.5]} // Size of cube
            moveTo={[-4, 4, -4]} // Camera moves here
            setLastCameraPosition={setLastCameraPosition} // Store the last camera position
          />

Even with multiple instances of HoverableCube, the camera is always looking at (0,0,0) after the cube is clicked.

any assistance is appreciated.

2

In vanilla this is usually due to the use of OrbitControls or similar camera control library that overrides the cameras direction.

In this case instead of doing the lookAt you would simply set controls.target to the point you want to look at. Not sure what the story is in rf3 tho.

1 Like