如何居中正射影机

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往右看。