在@react 3/光纤中使用lookAt

Question

我正在努力学习如何在three js中使用react.For，这是为了使用@react-three/fiber和@react-three/drei。

我以前学过三个js，我希望用它来学习使用带有react的三个js。

下面的代码应该显示从给定的坐标中发芽的框，但是目前它们都是向一个方向倾斜的。使用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

我认为(这方面的文档并不太具体)，我们不打算将lookAt设置为一个支柱，而是将其用作一个函数。我们可以使用useThree钩子获得对活动相机的访问。

在作为Canvas子组件挂载的组件中，请执行以下操作：

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 <></>;
}