React-Fiber: камера не столкнется с HoverableCube после перехода GSAP (CONTRYS.Target Проблема) ⇐ Javascript

[Anonymous]

Описание проблемы
Я использую React-three-Fiber, и у меня есть функция, называемая HoverableCube , которая создает прозрачный, интерактивный куб Полем При нажатии, он перемещает LE Camera Camefore к ней и должна иметь камеру с кубиком. < /P>
Параметры: < /p>

Код: Выделить всё

Parameters:
position, rotation, scale, moveTo, setLastCameraPosition, controlsRef
< /code>
position, rotation, scale

→ определить, где находится куб и его размер. Moveto → камера перемещается к этому 3D -вектору, когда нажимается куб. SetLastCamerAposition → сохраняет предыдущую позицию камеры, прежде чем перемещать контроль эталонное состояние для управления. Не обращаться к кубу после перемещения в Moveto.
Независимо от того, где находится куб, камера всегда обращена (0,0,0) после перехода GSAP. < /P>
что я попробовал

[*] В моем App () функция:

Код: Выделить всё

  const orbitRef = useRef()
< /code>
Then, passed it down to HoverableCube:

[*] Затем использовал ControlsRef для установки getPolarAlg и setFromSpherical .
/ol>
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',
})
// the code that controls camera look-at
const target = new THREE.Vector3(position[0], position[1], position[2]);
let sph = new THREE.Spherical(controlsRef.current.getDistance(),
controlsRef.current.getPolarAngle(), controlsRef.current.getAzimuthalAngle());
camera.position.setFromSpherical( sph ).add( target )
camera.lookAt( target )

// also tried this
camera.lookAt(position[0], position[1], position[2])
controls.target = controls.target || new Vector3();
controls.target.set(position[0], position[1], position[2]);

}
< /code>
Expected Behavior: The camera moves to moveTo & camera faces the cube at position.
Actual Behavior: The camera moves to moveTo. But it faces (0,0,0), NOT the cube
ive been tryuing to fix this for the past few days, im going crazy.
Edit:
For reference, this is my HoverableCube function:
function HoverableCube({ position, rotation, scale, moveTo, setLastCameraPosition, controlsRef }) {
const [hovered, setHovered] = useState(false)
const { camera, controls } = 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',
})
const target = new THREE.Vector3(position[0], position[1], position[2]);
let sph = new THREE.Spherical(controlsRef.current.getDistance(),
controlsRef.current.getPolarAngle(), controlsRef.current.getAzimuthalAngle());
camera.position.setFromSpherical( sph ).add( target )
camera.lookAt( target )
// Where i'm having issues with. Camera won't look at the position.
camera.lookAt(position[0], position[1], position[2])
controls.target = controls.target || new Vector3();
controls.target.set(position[0], position[1], position[2]);
}

return (

{/* Main Cube */}
setHovered(true)}
onPointerOut={() => setHovered(false)}
onClick={handleClick} // camera click move
>




{/* White Outline on Hover */}
{hovered && (




)}

)
}
< /code>
sorry if its too crude just copy n pasting the function

Подробнее здесь: https://stackoverflow.com/questions/794 ... ion-contro