ThreeJS模型加载器在类方法中使用时加载失败。

huangapple
go评论102阅读模式
英文:

ThreeJS model loader failed to load when used inside a class method

问题

我正在尝试构建一个ThreeJS场景，并将其编码为一个类：

  1. export class RenderCanvas {
  3.     #scene; // THREE.Scene()
  5.     // 其他属性和方法
  7.     loadGeometries() {
  8.         /* 在调用loadGeometries之前，#scene已经被初始化 */
  10.         var modelLoader = new FBXLoader();
  11.         for (let path of listOfObjects) {
  12.             modelLoader.load(path,
  13.                 function (obj) {
  14.                     obj.traverse(function (child) { /* 什么也没做 */ });
  15.                     this.#scene.add(obj); 
  16.                 },
  17.                 function (xhr) {
  18.                     console.log((xhr.loaded / xhr.total * 100) + "% loaded")
  19.                 },
  20.                 function (err) {
  21.                     console.error("加载对象时出错")
  22.                 }
  23.             )
  24.         }
  25.     }
  26. }

在另一个JS文件中，实例化了一个RenderCanvas类，并调用了loadGeometries()方法。

控制台显示模型加载到了100%，但随后触发了Error loading the object错误。

我注意到，如果我使用过程式的方式而不是面向对象编程，并将scene作为全局变量，那么模型加载器就能正常工作。所以我猜测问题可能与this.#scene.add(obj);缺少上下文有关，但我不确定是否确实是这种情况，也不知道如何修复。

出了什么问题，我该如何修复？

英文:

I'm trying to build a ThreeJS scene and have been coding it as a class:

  1. export class RenderCanvas {
  3.     #scene; // THREE.Scene()
  5.     // Other properties and methods
  7.     loadGeometries() {
  8.         /* #scene is initialized prior to loadGeometries being called */ 
  10.         var modelLoader = new FBXLoader();
  11.         for (let path of listOfObjects) {
  12.             modelLoader.load(path,
  13.                 function (obj) {
  14.                     obj.traverse(function (child) { /* did nothing */ });
  15.                     this.#scene.add(obj); 
  16.                 },
  17.                 function (xhr) {
  18.                     console.log((xhr.loaded / xhr.total * 100) + "% loaded")
  19.                 },
  20.                 function (err) {
  21.                     console.error("Error loading the object")
  22.                 }
  23.             )
  24.         }
  25.     }

In another JS file, a RenderCanvas class is instantiated and has the loadGeometries() method called.

The console showed that the model is loaded to 100%, but then the Error loading the object is triggered.

I noticed that if I use the procedural way instead of OOP and have scene as a global variable, then the model loader would work. So I am assuming that it has something to do with this.#scene.add(obj); missing the context, but have no idea if this is indeed the case or how to fix that.

What went wrong and how may I fix it?

答案1

得分: 1

似乎this指向的引用不正确，因为你在onLoad()回调函数内部。尝试将this引用保存在一个scope变量中。类似这样：

  1. loadGeometries() {
  2.     /* #scene在调用loadGeometries之前已经初始化 */
  4.     var modelLoader = new FBXLoader();
  5.     var scope = this;
  6.     for (let path of listOfObjects) {
  7.         modelLoader.load(path,
  8.             function (obj) {
  9.                 obj.traverse(function (child) { /* 未做任何操作 */ });
  10.                 scope.#scene.add(obj); 
  11.             },
  12.             function (xhr) {
  13.                 console.log((xhr.loaded / xhr.total * 100) + "% 已加载");
  14.             },
  15.             function (err) {
  16.                 console.error("加载对象时出错");
  17.             }
  18.         );
  19.     }
  20. }

或者，使用箭头函数而不是普通函数，因为箭头函数保留了this引用。

英文:

It seems this does not point to the right reference since you are inside the onLoad() callback. Try to save the this reference in a scope variable. Something like:

  1. loadGeometries() {
  2.     /* #scene is initialized prior to loadGeometries being called */ 
  4.     var modelLoader = new FBXLoader();
  5.     var scope = this;
  6.     for (let path of listOfObjects) {
  7.         modelLoader.load(path,
  8.             function (obj) {
  9.                 obj.traverse(function (child) { /* did nothing */ });
  10.                 scope.#scene.add(obj); 
  11.             },
  12.             function (xhr) {
  13.                 console.log((xhr.loaded / xhr.total * 100) + "% loaded")
  14.             },
  15.             function (err) {
  16.                 console.error("Error loading the object")
  17.             }
  18.         )
  19.     }
  20. }

Alternatively, use an arrow function instead of normal one since the former one retains the this reference.

huangapple
  • 本文由 发表于 2023年8月9日 01:54:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/76862078.html
  • javascript
  • three.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定