如何使正交相机居中

Question

我想定位正交相机，使其位于黑色方块的中心。

但由于某种奇怪的原因，它会自动旋转并显示黑色方块的顶视图，而我们只看到一条细黑线。

有时小提琴会发生变化，视图会自动刷新，黑色方块的正确一侧会再次显示。

在我的中心功能中，我需要更新相机吗？或者我应该只是操纵控件？我都试过了，但都没有成功。

中心摄像头功能：

const centerCamera = (controls, camera) => {
  const point = new THREE.Vector3(0, 500, 1);

  camera.position.copy(point);
  camera.lookAt(point.x, point.y, 10);

  controls.target.copy(point);

  controls.update();

  camera.updateProjectionMatrix();
  camera.updateMatrix();
};

场景：

import "./styles.css";
import * as THREE from "three";
import React from "react";
import { Canvas } from "@react-three/fiber";
import { MapControls, OrthographicCamera } from "@react-three/drei";

const CONTENT_GEOMETRY = roundedRect(-350, -50, 700, 100, 100 / 3.7);

function roundedRect(x = 0, y = 0, width = 50, height = 50, radius = 5) {
  const ctx = new THREE.Shape();
  ctx.moveTo(x, y + radius);
  ctx.lineTo(x, y + height - radius);
  ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
  ctx.lineTo(x + width - radius, y + height);
  ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
  ctx.lineTo(x + width, y + radius);
  ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
  ctx.lineTo(x + radius, y);
  ctx.quadraticCurveTo(x, y, x, y + radius);
  ctx.closePath();
  return ctx;
}

const centerCamera = (controls, camera) => {
  const point = new THREE.Vector3(0, 500, 1);

  camera.position.copy(point);
  camera.lookAt(point.x, point.y, point.z);

  controls.target.copy(point);

  controls.update();

  camera.updateProjectionMatrix();
  camera.updateMatrix();
};

export default function App() {
  const dpr = typeof window !== "undefined" ? window?.devicePixelRatio ?? 0 : 0;
  return (
    <div className="App">
      <Canvas
        frameloop="always"
        style={{ height: "100vh" }}
        linear
        dpr={Math.max(dpr, 2)}
      >
        <Content
          onMount={(controls, camera) => {
            centerCamera(controls, camera);
          }}
        />
      </Canvas>
    </div>
  );
}

const Content = ({ onMount }) => {
  const controls = React.useRef(null);
  const camera = React.useRef();

  React.useEffect(() => {
    if (controls.current && camera.current) {
      onMount(controls.current, camera.current);
    }
  }, [onMount]);

  return (
    <>
      <MapControls
        ref={controls}
        screenSpacePanning
        dampingFactor={1}
        enableRotate={false}
      />
      <OrthographicCamera ref={camera} makeDefault position={[0, 0, 2]} />
      <mesh position={[0, 500, 1]}>
        <shapeBufferGeometry args={[CONTENT_GEOMETRY]} />
        <meshBasicMaterial color="#000000" />
      </mesh>
    </>
  );
};

https://codesandbox.io/s/sleepy-dewdney-zuvyx?file=/src/App.js

Answer 1

我认为你的问题出在

  camera.position.copy(point);
  camera.lookAt(point.x, point.y, point.z);

你告诉相机去一个位置，然后看那个相同的位置，这会给你带来不想要的结果：当目的地在你所在的同一个地方时，你看哪个方向？尝试给lookAt() 一个不同的位置。例如：point.y - 1 向下看，point.x + 1 向右看。