typescript Three.js Object3D缺少isMesh、Material和Geometry Properties?

jdzmm42g  于 2023-05-01  发布在  TypeScript
关注(0)|答案(2)|浏览(575)

我用了三个。js r97和Angular 7。
我可以在本地运行和服务应用程序(正常工作),但我不能在类型错误的情况下为生产构建。
错误TS2339:类型“Object3D”上不存在属性“isMesh”。
错误TS2339:类型“Object3D”上不存在属性“material”。
错误TS2339:类型“Object3D”上不存在属性“geometry”。
发生这种情况的地方是在对象加载之后,我正在遍历各个部分。
child.isMesh和对子对象所做的修改都是抛出错误。
我是打字新手,不确定是否有更好的方法来处理操作。据我所知,我无法强制进行生产构建。任何帮助解决此问题的建议将不胜感激。

this.loader = new THREE.FBXLoader();
      this.loader.load('assets/models/C4D_Export.fbx', object => {

          object.traverse( child => {

              if( child.type == "Group"){
                  child.name = 'ToolGroup';
              }
              if ( child.isMesh ) {

                  const oldMat = child.material;
                  //CONVERT MATERIAL TO STANDARD MATERIAL.
                  child.material = new THREE.MeshStandardMaterial({
                      color: oldMat.color,
                      map: oldMat.map,
                  });

                  child.castShadow = true;
                  child.receiveShadow = true;
                  child.material.combine = THREE.MixOperation;
                  child.material.envMap = envMap;
                  child.material.shininess=10;
                  child.material.refractionRatio=1;
                  child.material.reflectivity=1;
                  //child.material.normalMap = texture;
                  //child.material.normalMapType = 0;
                  child.material.metalness=1;
                  child.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(5, 0, 0));
                  //child.material.color.setHex( 0xffffff );

                  var f2 = gui.addFolder('Position'+child.name);
                      f2.add(controller, 'positionX', -50, 50).onChange( function() {
                         child.position.x = (controller.positionX);
                      });
                      f2.add(controller, 'positionY', -50, 50).onChange( function() {
                         child.position.y = (controller.positionY);
                      });
                      f2.add(controller, 'positionZ', -50, 50).onChange( function() {
                         child.position.z = (controller.positionZ);
                      });

                  var sphereAxis = new THREE.AxesHelper(200);
                  child.add(sphereAxis);

              }

          });

          object.position.y = -20;
          object.scale.set(1,1,1);
          object.rotation.z = (-90*(Math.PI/180));
          objholder.add(object);

      });

我尝试为Object3D添加一个接口并定义属性,如下所示:

interface Object3D{
    isMesh?: any,
    geometry?: any,
    material?: any,
}

错误仍然存在。

编辑:更新2

我可以通过在导致问题的每一行上提供//@ts-ignore来消除问题。我不确定这是不是不好的做法,但它似乎有效。

hgb9j2n6

hgb9j2n61#

看起来你的TypeScript开发配置与生产配置不同。没有其他原因可以解释为什么它会在构建时出错,而在本地开发环境中编译时却不会。(顺便说一下,你看到的错误是正确的,因为child应该是Object3D,它没有.isMesh属性。)
不需要执行//@ts-ignore,您可以将child的类型Assert为您期望的类型:

if ( child.isMesh ) // Error: property .isMesh does not exist in Object3D

if ( (<any> child).isMesh ) // No error, but there's no type-checking with <any>

if ( (<THREE.Mesh> child).isMesh ) // No error, and you get access to Mesh props

您可以在TS文档中了解有关类型Assert的更多信息

jbose2ul

jbose2ul2#

你也可以像这样使用Assert检查函数:

export function isMeshType(object?: Object3D): object is THREE.Mesh {
  return object?.type === 'Mesh'
}

然后像这样使用它:

if (isMeshType(child) && child.isMesh) {
  // child is an instance of Mesh
}

相关问题