Threejs Geometry и TypeScript

Question

Я хотел бы написать правильные типы для вершин и граней сетки.

В первом примере я создаю новую сетку, и когда я хочу получить доступ к вершинам и граням из геометрии, я получаю несколькоошибки:

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), вы получаете геометрию, напечатанную как свойство geometry класса Mesh. Очевидно, свойство поддерживает два разных типа геометрии, поэтому вы получаете объединение: 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');