无法设置threejs MeshBasicMaterial 实例的userData 属性

Question

我在实例化时尝试设置 MeshBasicMaterial 实例的 userData 属性时遇到 TypeScript 错误。

例如：

import * as THREE from 'three';
...
const customUserData = {
  ...
};
const myMaterial = new THREE.MeshBasicMaterial({
  color: 0xf7f7f7, 
  transparent: true, 
  opacity: 1, 
  side: THREE.BackSide,
  userData: myCustomUserData
});

这会返回以下错误：

Argument of type '{ color: number; transparent: true; opacity: number; side: THREE.Side; userData: null; }' is not assignable to parameter of type 'MeshBasicMaterialParameters'.
  Object literal may only specify known properties, and 'userData' does not exist in type 'MeshBasicMaterialParameters'.  TS2345

但是，当我调查MeshBasicMaterial 的类型定义时，它扩展了Material：

export class MeshBasicMaterial extends Material { ... }

Material 类又指定了一个userData 属性：

export class Material extends EventDispatcher {
    // ...
    userData: any;
    // ...
}

但是，在类实例化之外指定 userData 属性是可行的：

let myMaterial = new THREE.MeshBasicMaterial({...});
myMaterial.userData = myCustomUserData;

MeshBasicMaterial 不应该从Material 继承userData 属性，还是我错过了一些明显的东西？ （这可能与MeshBasicMaterialParameters 类型有关，但不清楚为什么使用此类型或阻止从Material 继承属性。）

Answer 1

您似乎发现了一个缺失的类型定义！

您是对的，当查看 Material 类定义文件时，it has a .userData property。这意味着将其设置为 material.userData = xxx; 应该可以正常工作。

但是，当使用new THREE.Material(props); 启动材料时，您传递的props 参数使用类似但不同的结构，在接口MaterialParameters 中声明，如果you look at what that includes on line 16，则缺少userData。

同样的错误适用于MeshBasicMaterialParameters，因为它扩展了MaterialParameters。

作为一个快速的解决方案，我建议您将其设置为 material.userData = xxx;，并提交一个 Github 问题，以便在未来的版本中修复它。作为更复杂的解决方案，您可以创建自己的声明文件and do a Merge，并使用MaterialParameters 接口包含.userData。