javascript - 如何获取three.js场景的坐标范围？

Question

当我使用 html 和 javascript、相机和渲染器创建场景并在浏览器中显示该场景时：如何找出场景的可见范围？

在我的具体情况下，我只显示一个带有对象的二维 x/y 场景。但是，给定一个场景，最小 x/y 值是多少，以便创建一个对象，例如

var object = new THREE.Mesh( circle.clone(), new THREE.MeshBasicMaterial( { color: new THREE.Color('white'), opacity: 0.5 } ) );
object.position.x = ??;
object.position.y = ??;
object.position.z = 0;
object.geometry.scale(0.8, 0.8, 1);
scene.add( object );

只是在浏览器窗口的边缘可见？

标签： javascriptthree.js

Answer 1

您应该简单地获取 3D 世界的大小（可见部分，取决于您的相机设置），例如：

const vFOV = (camera.fov * Math.PI) / 180;
const height = 2 * Math.tan(vFOV / 2) * Math.abs(camera.position.z);
const width = height * camera.aspect;

object.position.x = -width / 2;
object.position.y = -height / 2;