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.