javascript - THREE.SpriteCanvasMaterial 不是构造函数 | Angular 7

Question

我正在使用 Angular 7 项目，我想用这个 document code 添加三个 JS 到我的项目中从三的官方网站上，当我开始运行项目时，它显示了一个错误，如下所示:

core.js:15723 ERROR TypeError: THREE.SpriteCanvasMaterial is not a constructor
at init (<anonymous>:32:26)
at HTMLDocument.<anonymous> (<anonymous>:16:9)
at e (jquery.min.js:2)
at t (jquery.min.js:2)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:17289)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
at ZoneTask.invoke (zone.js:485)

结果也不起作用。我不知道是什么导致这个错误发生，即使我的代码与实时站点中的示例相同。我还添加了他们需要的脚本。

<script src="assets/js/threejs/three.js"></script>
<script src="assets/js/threejs/Projector.js"></script>
<script src="assets/js/threejs/CanvasRenderer.js"></script>
<script src="assets/js/threejs/stats.min.js"></script>

Answer 1

https://threejs.live/is不是该项目的官方网站。官方示例托管在这里:https://threejs.org/examples/

CanvasRenderer 已在一年前随 R98 删除。因此，您不能再将这种类型的渲染器和 SpriteCanvasMaterial 与最新的 two.js 版本一起使用。

解决方案是使用WebGLRenderer。链接的示例也可作为 WebGL 演示使用:https://threejs.org/examples/webgl_points_waves

三.js R111