时间戳

首页 > 解决方案 > Threejs 几何和 TypeScript

typescript - Threejs 几何和 TypeScript

问题描述

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

在第一个示例中，我创建了一个新的 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'.

标签： typescriptthree.jsgeometry

解决方案

通过网newMesh.geometry格geometry（显然，该属性支持两种不同类型的几何图形，因此您得到一个 union: 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

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

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

推荐阅读