Threejs 几何和 TypeScript

Question

我想为网格顶点和面编写正确的类型。

在第一个示例中，我创建了一个新的 Mesh，当我想从几何体中访问 Vertices 和 Faces 时，我遇到了一些错误：

const material = new THREE.MeshLambertMaterial({color: 0x00ff00});
const geometry = new THREE.Geometry();
const newMesh = new THREE.Mesh(geometry, material);
scene.add(newMesh);

const { vertices, faces } = newMesh.geometry;
// Error: Property 'vertices' does not exist on type 'BufferGeometry | Geometry'
// Error: Property 'faces' does not exist on type 'Geometry | BufferGeometry'.

newMesh.geometry.colorsNeedUpdate = true;
// Error: Property 'colorsNeedUpdate' does not exist on type 'Geometry | BufferGeometry'.

在第二个示例中，我从场景中获取 Mesh，然后出现以下错误：

const mesh = scene.getObjectByName('boxMesh');
const geometry = mesh.geometry; 
// Property 'geometry' does not exist on type 'Object3D'.

Answer 1

通过网格 (newMesh.geometry) 访问几何图形，您将获得类似于 Mesh 类上的 geometry 属性类型的几何图形。显然，该属性支持两种不同类型的几何，因此您可以得到一个联合：Geometry | BufferGeometry。

如果您确切知道所使用的几何类型，您可以断言属性值的类型：

const { vertices, faces } = <THREE.Geometry>newMesh.geometry;

如果您不知道geometry 的类型，您需要一些条件逻辑，例如使用类似的东西：

const geometry = newMesh.geometry;
if (geometry instanceof THREE.Geometry)
    // geometry will be typed as Geometry here
else
    // geometry will be typed as BufferGeometry here

---

在第二种情况下，您使用getObjectByName，它总是返回最基本类型的对象Object3D。在这里，您还必须相应地断言结果的类型。

// Assuming the thing named boxMesh is a Mesh...
// The <any> assertion prevents additional type errors.
const mesh = <THREE.Mesh><any>scene.getObjectByName('boxMesh');