Question

我将Angle从V-7.2.5更新为V-7.2.15，并将three.js从V-0.101.2更新为V-0.105.2，我遇到了各种各样的错误，我不知道该怎么做修复：

THREE.Box3 方法 .getSize（）给出“ 错误TS2554：预期有1个参数，但有0个。”

.material.dispose（）给出“ 错误TS2339：属性'dispose'在'Material | Material []'类型上不存在。“

.material.color.set（0x00cc00）; 给出“ 错误TS2339：属性'color'在类型'Material'上不存在。”

.object.material 给出“ 错误TS2339：'Object3D'类型上不存在属性'material'。”

对于一些我认为不正确的错误，提出了一些修复建议，例如将某些变量类型转换为 any ，以强制三个识别方法。结果是三个js的行为不正确。

不幸的是，官方文档仍然描述了处置材料的“旧方法”，或者没有解释如何初始化预期的参数以使旧代码正常工作。

有人设法使最新版本的angular和three.js协同工作吗？你能给我指出一个解决方案吗？

谢谢

恐龙

让我澄清

我使用一个名为aDomain的Box3来记录加载到场景中的对象的尺寸（占用的空间）。它是动态的，每次在场景中加载或删除新对象时都会重新计算。

当我创建剪切平面时，我需要它们的大小并使用代码：

size: [this.aDomain.getSize().z, this.aDomain.getSize().y],

该代码不再起作用，因为getSize（）需要一个参数，但这对我来说没有意义。我想要一个aDomain的大小。我必须通过什么向量作为参数？我已经在调用我感兴趣的对象的方法！

更令人担忧的是所有使我的代码崩溃的缺失属性。我该如何更换它们？

this.aRenderState.clipping.planes [0] .object.material。 dispose（）;

this.filteredIntersects [0] .object。材质

this.meshCollection [part] .object.material。剪切平面

其中：

对象是三个网格

由于材料类型的更改浪费了几个月的开发时间，我觉得我不得不修改整个应用程序...

Answer 1

它不需要浪费数月的开发时间。您只需要参与"Type Assertion"，在这里您可以告诉编译器您期望什么类型的变量。

示例：

this.filteredIntersects[0].object.material

当您访问.object时，编译器希望您得到一个Object3D，它不是具有一个.material属性。如果您知道这将是Mesh，则可以声明所需的类型：

(<THREE.Mesh>this.filteredIntersects[0].object).material

现在，TS被迫期望括号()的结果将是Mesh。

为什么会这样？

此安全机制非常重要，因为它可以保护您避免访问不存在的属性。如果Object3D是Sprite, LineSegment, or Group而不是Mesh怎么办？您在运行时会出错。因此，您需要告诉编译器您知道其中的内容。

修复问题：

对于其他所有错误也可以这样做：

// Original:
blah.material.dispose()
// Asserted type:
(<THREE.Material>blah.material).dispose()

// Original:
bleh.material.color.set(0x00cc00);
// Asserted type
(<THREE.MeshBasicMaterial>bleh.material).color.set(0x00cc00);`

请记住，使用material.color是the basic Material class does not have a .color property。您必须先确定要使用哪种材料，然后才能访问.color。这是因为像Phong，Basic或Standard do 这样的材质具有.color属性，而ShaderMaterial则没有。

在Three.js升级后，Angular 7.2.15 +三个0.105.2无法正常工作

1 个答案:

示例：

为什么会这样？

修复问题：