在@react-三/纤维中使用lookAt

Question

我正在尝试学习如何使用three jsReact。为此，我正在使用@react-three/fiber和@react-three/drei。

chriscourses 的这个项目是我用来学习三个 js 的项目，我希望用它来学习使用 Threejs 和 React。

下面的代码应该显示从给定坐标中萌芽的方框，但目前它们都向一个方向倾斜。使用lookat应该可以解决问题，但是我不知道如何lookat在@react-three/fiber/中使用@react-three/drei。

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 覆盖