three OrbitControls看向目标

要使用Three.js中的OrbitControls来使相机看向目标，你需要使用`lookAt()`方法将相机的焦点设置为目标的位置。具体步骤如下：

1. 创建一个Three.js场景和一个相机。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

2. 创建一个OrbitControls实例并将其附加到相机上。

const controls = new THREE.OrbitControls(camera, renderer.domElement);

3. 设置OrbitControls的目标为你想要相机看向的对象。

controls.target.set(x, y, z); // 替换 x、y、z 为你的目标位置。

4. 在渲染循环中使用`lookAt()`方法将相机的焦点设置为目标的位置。

function render() {
  camera.lookAt(controls.target);
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

这样，当你旋转OrbitControls的时候，相机会始终看向目标位置。

相关问题

当用react-three/drei中的OrbitControls控制器控制透视组件时，如何获取目标物体的缩放值

在使用OrbitControls控制透视组件时，可以通过调用控制器的`getTarget`方法获取当前控制器的目标点，然后通过目标点获取目标物体，从而获取目标物体的缩放值。

具体的代码实现如下：

import { OrbitControls } from 'drei';
import { useThree } from 'react-three-fiber';

function MyComponent() {
  const { camera, gl } = useThree();
  const controlsRef = useRef();

  // 获取目标物体的缩放值
  useEffect(() => {
    const target = controlsRef.current.getTarget();
    const obj = gl.scene.getObjectByName(target.name);
    const scale = obj.scale;
    console.log(scale);
  }, [gl.scene, controlsRef]);

  return (
    <>
      <OrbitControls ref={controlsRef} args={[camera, gl.domElement]} />
      {/* 你的其他组件 */}
    </>
  );
}

在上面的代码中，我们通过`useEffect`来监听`gl.scene`和`controlsRef`的变化，当它们发生变化时，我们就通过`controlsRef.current.getTarget()`方法获取当前控制器的目标点，然后通过`gl.scene.getObjectByName(target.name)`获取目标物体，最后获取目标物体的缩放值`scale`并打印到控制台上。

需要注意的是，当控制器的目标点指向的不是一个具名的物体时，获取目标物体的方法可能会失效。此时需要先通过其他方式获取目标物体的引用。

three.js 摄像头目标跟随

可以使用 three.js 中的 `OrbitControls` 控制器来实现摄像头目标跟随。具体实现步骤如下：

1. 创建一个 `OrbitControls` 实例，并将摄像头对象和渲染器的 DOM 元素传入构造函数中。

const controls = new THREE.OrbitControls(camera, renderer.domElement);

2. 设置 `OrbitControls` 的 `target` 属性为目标对象的位置。

controls.target.set(targetX, targetY, targetZ);

3. 在每一帧渲染之前，更新 `OrbitControls` 的状态。

controls.update();

完整代码示例：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(targetX, targetY, targetZ);

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();