三mtl加载程序错误: THREE.MeshPhongMaterial：.shading已被删除->对象不可见

Question

昨天我问了这个问题(Uncaught : THREE.MTLLoader不是构造函数2.0)，我以为我终于开始工作了，但现在却出现了新的问题：

我已经使用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)

  });
});

我不太确定这是否类似于这个问题：https://github.com/sohamkamani/three-object-loader/issues/9，因为如果我例如插入：

 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({ })));
}

插入白色网格--但我不知道如何将mtl-文件作为颜色插入，因为在示例中，它们使用getHex()。而且，如果我必须对每个网格单独执行，这似乎需要很长的时间(我正在克隆模型，因为我需要两个)。或者我可以在某种程度上使用object.traverse -我不想手动更改加载程序。

任何帮助都是非常感谢的。

编辑--我现在已经尝试了许多不同的方法，但它们还没有起作用，所以我将在这里总结这些问题，希望有人能看到它的错误所在：

1. 上面提到的方法，并解释了为什么它不能在注释中工作。我更新到了最新版本的三，现在我得到了同样的错误，但只是作为一个警告，对象仍然是不可见的。这个错误现在似乎是别的什么原因造成的。如果我将其更改为OBJloader中的平阴影，警告就会消失，但这些对象仍然不可见--而且我真的不想更改文件。 THREE.MeshPhongMaterial：.shading已被删除。使用布尔值.flatShading设置@ three.js:43344解析@ index.js:628 (匿名)@ index.js:58 (匿名)@ three.js:30483 XMLHttpRequest.send (异步) load @ three.js:30563 load @ index.js:56 (匿名)@ main.ts:117 (匿名)@ index.js:36 (匿名)@ three.js:30090 XMLHttpRequest.send (异步) load @three.js:30146 load @ index.js:34 s@ _prelude.js:1 e@ _prelude.js:1 (匿名)@ _prelude.js:1
2. 只使用三个obj加载程序可以很好地工作(如这里所描述的：Uncaught : THREE.MTLLoader不是构造函数)
3. 复制OBJLoader和MTLLoader (https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/OBJLoader.js和https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/MTLLoader.js)，并将它们放在三个/src/加载器文件夹中，然后从./loaders/mtlLoader.js './loaders/OBJLoader.js‘导出{ OBJoader}开始，在three.js:export { MTLLoader}中包括以下内容

然后试着像这样装载它们：

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

并且以与上面相同的方式使用它们会导致Uncaught TypeError: THREE.MTLLoader is not a constructor，当试图使用console.log(MTLLoader)或console.log(OBJLoader)时，它们都是未定义的。因此，我不确定它们是否正确地加载到框架中，因为我只能找到将它们加载到html (<script src="js/loaders/OBJLoader.js"></script>).I中的示例，所以我不确定是否应该创建引用路径，或者如何实现。

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

1. 我试图做的最后一件事是加载obj和mtl加载器，它实际上包含在示例中的三个中，其中我在three.js文件中引用了它：export { OBJLoader } from '../examples/js/loaders/OBJLoader.js'，但是给出了相同的‘非构造函数’错误。

Answer 1

聚会有点晚了，但是你可以通过利用webpack的three.js来解决替代的进口装载机装载机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');

这样做的要点是我们import来满足TypeScript，但是我们显式地require装载器，这样我们就有机会给他们提供他们所需要的全局THREE。如果遇到需要两个导入(如FBXLoader )的依赖项，则可以在!path-to-file.js之前用逗号分隔它们。

这有点傻，但它允许我们工作，而不必依赖于可能与您当前版本的3不匹配的自定义包。我正在用MTLLoader和OBJLoader成功地在一个用TypeScript 2.9.2构建的React应用程序中使用它。