如何始终在 react-three/fiber 中查看同一个对象？

Question

我有一个包含建筑物的 3D 模型。问题是当我加载模型时，相机总是看着黄色标记点[给定图像]。当我放大和缩小时，旋转模型，一切都以那个黄点为中心。当我极度缩放时，它就到了重点。但我想要的是始终看着建筑物，无论我是旋转还是缩放它都应该看着建筑物，而不是那个点。

我正在使用透视相机和带有 react-three/fiber 的轨道控制。我该如何解决这个问题？

这是我的代码：

import { Canvas } from "@react-three/fiber";
import { useLoader, useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import React, { useEffect, useMemo, useRef, Suspense, useState } from "react";
import {
  Environment,
  OrbitControls,
  PerspectiveCamera,
} from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import model2 from "../../3D_Model/LeftBankCombined.glb";
import styles from "./style.module.scss";
import grassTexture from "../../3D_Model/textures/Grass.PNG";
import Curbs from "../../3D_Model/textures/Asphalt.PNG";
import ButtonTest from "./ButtonTest";
const textureLoader = new THREE.TextureLoader();
const grass = textureLoader.load(grassTexture);
const curbs = textureLoader.load(Curbs);

const Model = ({ hide }) => {
  //gltf loader
  let unitBox = [];
  const gltf = useLoader(GLTFLoader, model2);
  let mesh = gltf.scene;
  mesh.children[0].traverse((child) => {
    if (child.material) {
      var name = child.material.name;

      if (name.includes("Glass") || name.includes("GLASS")) {
        child.material = new THREE.MeshPhysicalMaterial({
          metalness: 1,
          roughness: 0,
          // map:grass,
          envMapIntensity: 1,
          transparent: true,
          opacity: 0.09,
        });
        console.log(child.material);
      }
    }
  
  });
  mesh.scale.set(0.025, 0.025, 0.025);
  return (
    <>
      <primitive object={mesh} scale={0.025} />
    </>
  );
};

const Axis=()=>{
  const axesHelper = new THREE.AxesHelper( 5 );

  axesHelper.position.x=40
  axesHelper.position.y=0
  axesHelper.position.z=-100

  return(<>
  
  <primitive object={axesHelper}/>
  </>)

}

function Dolly() {
  // This one makes the camera move in and out
  let flag=true
  useFrame(({ clock, camera }) => {
    // camera.position.z = 100 + Math.sin(clock.getElapsedTime()) * 30

    console.log(camera.position.z);

    if(flag){
      camera.position.z = Math.sin(clock.getElapsedTime()*0.1) * 200;
      console.log(camera.position.z)
    }else{
      camera.position.y = Math.sin(clock.getElapsedTime()*0.1) * 200;
      if(camera.position.y==150){
        flag=false
      }
    }
    
    
  },[]);

  return null;
}
export default function App() {
  const [hide, setHide] = useState(false);
  const click = () => {
    console.log("Click");
  };

  return (
    <div className={`${styles.App}`}>
      <Canvas>
        <PerspectiveCamera makeDefault position={[120, 150, -200]}  onUpdate={(c) => c.updateProjectionMatrix()}/>
        <ambientLight intensity={0.5} />
        <directionalLight position={[0, 20, 0]} />
        
        <OrbitControls
          maxPolarAngle={Math.PI / 2}
          autoRotate={false}
          autoRotateSpeed={0.5}
        />
        {/* <Dolly /> */}
        <Axis/>
        <Suspense fallback={null}>
          <Model hide={hide} />
          {/* <Environment preset="sunset" background /> */}
        </Suspense>
      </Canvas>
      <ButtonTest click={click} />
    </div>
  );
}

Answer 1

希望，我理解你。

想一想，现在相机看全局零点。我想你可以：

1. 将建筑物的对象位置更改为全局零
2. 使用相机lookAt method查看建筑点
3. 修复模型中心

请告诉我你是如何解决这个问题的

Answer 2

您可以设置 OrbitControls 的目标：

<OrbitControls target={Model.position} ... />

这将允许您的相机围绕模型运行。