三个 js - JSON 加载器在示例中有效，但在我的代码中无效？答案

【问题标题】：Three js - JSON loader works in example but not in my code?三个 js - JSON 加载器在示例中有效，但在我的代码中无效？
【发布时间】：2019-09-18 07:38:45
【问题描述】：

我只是想加载一个模型，其中包含从搅拌机到三个 js 的动画。所以我试图复制http://stemkoski.github.io/Three.js/Model-Animation.html

我下载了他的代码，他使用：

var jsonLoader = new THREE.JSONLoader();
        jsonLoader.load( "models/android-animations.js", addModelToScene );
        // addModelToScene function is called back after model has loaded

        var ambientLight = new THREE.AmbientLight(0x111111);
        scene.add(ambientLight);

    }

    function addModelToScene( geometry, materials ) 
    {
        // for preparing animation
        for (var i = 0; i < materials.length; i++)
            materials[i].morphTargets = true;

        var material = new THREE.MeshFaceMaterial( materials );
        android = new THREE.Mesh( geometry, material );
        android.scale.set(10,10,10);
        scene.add( android );
    }

我在节点 JS 中工作，但是当我这样做时出现错误 JSONLoader has been removed：

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "./src/scripts/elements/android-animations.js", this.addModelJson);

我尝试过 FBXLoader、ObjectLoader，一切都试过了。我可以加载模型，但不能加载带有动画的模型。这是唯一的解决方案吗？

如果 JSONLoader 不再存在，我如何从搅拌机加载带有动画的模型？

更新：

当我像这样使用 LegacyJSONLoader 时，this 未定义：

var jsonLoader = new THREE.LegacyJSONLoader();
jsonLoader.load( "./src/scripts/elements/android-animations.js", this.addModelJson);

addModelJson( geometry, materials, scene )
  {
    // for preparing animation
    for (var i = 0; i < materials.length; i++)
        materials[i].morphTargets = true;

    var material = new THREE.MeshFaceMaterial( materials );
    var android = new THREE.Mesh( geometry, material );
    android.scale.set(10,10,10);

    this.scene.add( android );
  }

【问题讨论】：

你应该看到那个人在他的例子中使用了哪个版本的three。我的猜测是这比你的要老（或更新）得多。另外，你的意思是new THREE.AmbientLight('0x111111');
@mwilson 如果我在更新版本并且我尝试过 fbx 动画混合器，你用什么来导入动画模型？
您应该在发帖前尝试搜索答案。我向你保证，this is undefined 的问题已经在 StackOverflow 上得到了数十次回答。这是搜索的第一个结果：stackoverflow.com/questions/20279484/…

标签： javascript html three.js

【解决方案1】：

对于this 未定义的第二个问题。

this 可能不是您要查找的对象。 this 可能意味着许多不同的东西，具体取决于您使用它的方式和使用它的位置。

但是，scene 似乎已传递给您的函数，因此您应该可以这样做：

var jsonLoader = new THREE.LegacyJSONLoader();
jsonLoader.load( "./src/scripts/elements/android-animations.js", this.addModelJson);

addModelJson( geometry, materials, scene ) // <-- scene is passed in
  {
    // for preparing animation
    for (var i = 0; i < materials.length; i++)
        materials[i].morphTargets = true;

    var material = new THREE.MeshFaceMaterial( materials );
    var android = new THREE.Mesh( geometry, material );
    android.scale.set(10,10,10);

    // this.scene.add( android ); `this` isn't what you are thinking it is
    scene.add(android); // <-- use the passed in `scene` object instead
  }

【讨论】：

对不起，是的，我只是尝试做场景，但它没有传递给函数。我将其添加为试图解决“这个”问题的参数。如何在函数中引用 this.scene，那么“this”在哪里是全局 this？
scene 实际定义在哪里

【解决方案2】：

此加载程序仍可作为 LegacyJSONLoader 使用。如果您在项目中包含该文件，您应该能够创建LegacyJSONLoader 的实例并像以前一样加载您的 JSON 模型。
这是Link

【讨论】：

我试过了。然后我在我的 addToScene 函数中引用这个问题（请参阅问题更新）