Typescript 三个mtl加载程序错误：three.MeshPhongMaterial:。阴影已被删除->；对象不可见

昨天我问了这个问题（），我以为我终于开始工作了，但现在出现了新的问题：

我已经使用npm安装了“三个mtl加载器”，但现在似乎该对象不可见，尽管我可以

console.log

出于某种原因，它现在抛出了以下错误，我想这就是它不可见的原因：

 THREE.MeshPhongMaterial: .shading has been removed. Use the boolean .flatShading instead.
 get                                @   three.js:43339
 WebGLPrograms.getParameters        @   three.js:17838
 initMaterial                       @   three.js:21734
 setProgram                         @   three.js:21929
 WebGLRenderer.renderBufferDirect   @   three.js:20964
 renderObject                       @   three.js:21722
 renderObjects                      @   three.js:21695
 WebGLRenderer.render               @   three.js:21463
 render                             @   main.ts:163
 requestAnimationFrame (async)      
 render                             @   main.ts:162 
 requestAnimationFrame (async)      
 render                             @   main.ts:162
 requestAnimationFrame (async)  
 ...    

我现在的代码如下所示：

import * as THREE from 'three'
import * as OBJLoader from 'three-obj-loader'
OBJLoader(THREE)
import * as MTLLoader from 'three-mtl-loader'

//create global variables such that we can work with models outside of loader: 
var model1, model2;

var mtlLoader = new MTLLoader();
mtlLoader.setPath( 'http://blabla/objects/' );
mtlLoader.load( 'bla.obj.mtl', function(materials){

  materials.preload();

  var objLoader = new THREE.OBJLoader();  
  objLoader.setMaterials( materials );
  objLoader.setPath( 'http://blabla/objects/' );
  objLoader.load( 'bla.obj', function (object){

      var object1 = object.clone();
      model1 = object;     //save in global variables and add those to the scene
      model2 = object1; 

      scene.add(model1);
      scene.add(model2)

  });
});

import {MTLLoader} from 'three'
import {OBJLoader} from 'three'

我不太确定这是否是一个类似于此的问题，因为如果我插入：

 let child;
 for(let i = 0; i < object.children.length; i++) {
    child = object.children[i];
    scene.add(new THREE.Mesh(child.geometry, new THREE.MeshPhongMaterial({ })));
}

仅使用三个obj加载器工作正常（如下所述：）

复制OBJLoader和MTLLoader( 及) 并将它们放在三个/src/loaders文件夹中，然后在three.js中包含以下内容：

从“./loaders/MTLLoader.js”导出{MTLLoader} 从“./loaders/OBJLoader.js”导出{OBJoader}

然后尝试这样加载它们：

import * as THREE from 'three'
import * as OBJLoader from 'three-obj-loader'
OBJLoader(THREE)
import * as MTLLoader from 'three-mtl-loader'

//create global variables such that we can work with models outside of loader: 
var model1, model2;

var mtlLoader = new MTLLoader();
mtlLoader.setPath( 'http://blabla/objects/' );
mtlLoader.load( 'bla.obj.mtl', function(materials){

  materials.preload();

  var objLoader = new THREE.OBJLoader();  
  objLoader.setMaterials( materials );
  objLoader.setPath( 'http://blabla/objects/' );
  objLoader.load( 'bla.obj', function (object){

      var object1 = object.clone();
      model1 = object;     //save in global variables and add those to the scene
      model2 = object1; 

      scene.add(model1);
      scene.add(model2)

  });
});

import {MTLLoader} from 'three'
import {OBJLoader} from 'three'

以与上面相同的方式使用它们会导致

未捕获类型错误：THREE.MTLLoader不是构造函数

，当尝试

console.log（MTLLoader）

或

console.log（OBJLoader）

时，它们都未定义。因此，我不确定它们是否正确加载到框架中，因为我只能找到用html（

）加载它们的示例。我对typescript非常陌生，所以我不确定是否应该创建引用路径，或者如何创建引用路径

如果尝试使用OBJLoader2，也会出现同样的问题

我尝试做的最后一件事是加载obj和mtl加载器，它实际上在examples下的三个文件中，我在three.js文件中引用它：

export{OBJLoader}from'../examples/js/loaders/OBJLoader.js'

，但这会给出相同的“nota constructor”错误 `

---

虽然参加派对有点晚，但您可以通过使用webpack来解决替代three.js loader npm软件包的问题

// I'm not positive that we even need to declare this `const` but I haven't tested
const THREE = require('three');

import {
  OBJLoader,
  MTLLoader
} from 'three';

require('imports-loader?THREE=three!three/examples/js/loaders/OBJLoader.js');
require('imports-loader?THREE=three!three/examples/js/loaders/MTLLoader.js');

其要点是我们导入以满足TypeScript的要求，但我们明确地要求加载程序，这样我们就有机会向它们提供它们所需要的全局三个。如果遇到需要两个导入的依赖项，如

FBXLoader

，可以在

前面用逗号分隔它们！文件.js的路径

---

这有点愚蠢，但它让我们不必依赖可能与当前版本3不匹配的定制包就可以工作。我在一个用TypeScript 2.9.2构建的React应用程序中成功地将其与MTLLoader和OBJLoader一起使用。

您能发布收到的全部错误吗？在进行任何猜测之前，我想先看看错误来自何处（什么文件）。是的，当然-1秒

three obj loader

是导致警告的原因（不是错误），而

three mtl loader

是一个版本落后。这让我担心那些软件包中还有什么不是最新的。知道这个软件包也可能是落后的曲线，请您尝试让我们知道，如果它有区别吗？我很乐意，但我不太确定如何使用它？我尝试以与上面类似的方式使用它：

import*作为“wwobjloader2”中的OBJLoader2；OBJLoader2（三个）

然后改用

new THREE.OBJLoader2（）

——但我得到的错误是

Uncaught ReferenceError:THREE未在OBJLoader2.js中的第一个if语句中定义

，这可能意味着npm中的版本与threejs repo中的版本已经过时：（threejs生态系统不是很好。作为一个健全的检查，你可以尝试从three的源代码复制一个，看看是否有效。在这种情况下，我不得不在npm上托管我自己版本的三个库，这不是小事。我正试图用包捆绑程序而不是网页包来做类似的事情，所以“导入加载程序”包不适用。我只是直接尝试了“要求”或“导入”

three/examples/js/loaders/OBJLoader.js

，但我得到一个运行时错误，说没有定义three，尽管与您的示例类似，我在尝试导入OBJLoader之前已经导入了三个。有什么想法吗？