在@react three/fiber中使用lookAt

Question

我正在尝试学习如何将three js与react一起使用。为此，我使用@react-three/fiber和@react-three/drei。

chriscourses的这个项目是我用来学习threejs的，我希望用它来学习使用带有react的threejs。

下面的代码应该显示从给定的堇青石中发芽的盒子，但目前它们都朝着一个方向倾斜。使用lookat应该可以解决这个问题，但我不知道如何在@react-three/fiber/@react-three/drei中使用lookat。

import React, { FC, useRef } from 'react';
import { Box as NativeBox } from '@react-three/drei'
import { Vector3 } from 'three';
import { useFrame } from '@react-three/fiber';

type Props = {
country: any,
}
const lookAtCubePosition = new Vector3(0, 0, 0)
const Box: FC<Props> = (props) => {
const mesh = useRef()

const { country } = props;
const scale = country.population / 1000000000
const lat = country.latlng[0]
const lng = country.latlng[1]
const zScale = 0.8 * scale
const latitude = (lat / 180) * Math.PI
const longitude = (lng / 180) * Math.PI
const radius = 5
const x = radius * Math.cos(latitude) * Math.sin(longitude)
const y = radius * Math.sin(latitude)
const z = radius * Math.cos(latitude) * Math.cos(longitude)
console.log('box');
const lookAtFunc = (lookAt: Vector3) => {
lookAt.x = 0;
lookAt.y = 0;
lookAt.z = 0;
}
useFrame((state) => {
state.camera.lookAt(lookAtCubePosition)
})

return <NativeBox
args={[
Math.max(0.1, 0.2 * scale),
Math.max(0.1, 0.2 * scale),
Math.max(zScale, 0.4 * Math.random())
]}
position={[
x, y, z
]}
lookAt={lookAtFunc}
ref={mesh}
>
<meshBasicMaterial
attach="material"
color="#3BF7FF"
opacity={0.6}
transparent={true}
/>
</NativeBox>;
};
export default Box;

Answer 1

如果您正在使用OrbitControls，您必须为OrbitControls'而不是相机的lookAt设置"目标"，因为相机的lookAt被OrbitControls覆盖

Answer 2

I认为(文档对此并不太具体(，我们不打算将lookAt设置为道具，而是将其用作函数。我们可以使用useThree挂钩访问活动摄像机。

在作为Canvas的子级安装的组件中，do:

import { useThree } from "@react-three/fiber";
// Takes a lookAt position and adjusts the camera accordingly
const SetupComponent = (
{ lookAtPosition }: { lookAtPosition: { x: number, y: number, z: number } }
) => {
// "Hook into" camera and set the lookAt position
const { camera } = useThree();
camera.lookAt(lookAtPosition.x, lookAtPosition.y, lookAtPosition.z);

// Return an empty fragment
return <></>;
}