在三个 JS 中查看任意几何图形

Question

我必须将 csv 文件中的 3 种不同类型的几何图形（立方体、线和点）加载到场景中，添加相机和灯光来查看它。

听起来很简单，但我正在努力处理场景中心的点和定位到点收集。

我正在寻找一些伪代码，它概述了无论几何形状如何都能实现这一目标的方法。

我已经将它与立方体一起使用，但我正在努力解决点和线。

我目前正在使用的过程的粗略想法是-：

1. 执行导入
2. 将导入的几何体包装在一个组中
3. Position 组在原点
4. 创建相机并指向原点

欢迎任何想法。

富有的

Answer 1

一种典型的方法是计算几何的 AABB 并使用它来使几何在原点居中。 three.js中的典型代码如下所示：

const aabb = new THREE.Box3().setFromObject( object );
const center = aabb.getCenter( new THREE.Vector3() );

object.position.x += ( object.position.x - center.x );
object.position.y += ( object.position.y - center.y );
object.position.z += ( object.position.z - center.z );

如果您需要更完整的解决方案来自动配置具有最佳参数的相机和控件 ( THREE.OrbitControls )，请查看以下基于three.js的glTF查看器中的代码：

https://github.com/donmccurdy/three-gltf-viewer/blob/691ca91fddb69b6e1ba3d3a49753142e38082ef7/src/viewer.js#L218-L247

three.js R108