三-mtl-loader 错误：THREE.MeshPhongMaterial：.shading 已被移除 -> 对象不可见

Question

昨天我问了这个问题（Uncaught TypeError: THREE.MTLLoader is not a constructor 2.0），我以为我终于开始工作了，但现在却出现了新的问题：

我已经使用 npm 安装了“three-mtl-loader”，但现在该对象似乎不可见，尽管我可以通过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 - 我不想手动更改加载器。

非常感谢任何帮助：D

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

1. 上面提到的方法，并解释了为什么它在 cmets 中不起作用。我更新到三个的最新版本，现在我得到了同样的错误，但只是一个警告，对象仍然不可见。这个错误现在似乎来自别的东西。如果我在 OBJloader 中将其更改为平面阴影，警告会消失，但对象仍然不可见 - 我真的不想更改文件。

   THREE.MeshPhongMaterial: .shading has been removed. Use the boolean .flatShading instead
   set @   three.js:43344
   parse   @   index.js:628
   (anonymous) @   index.js:58
   (anonymous) @   three.js:30483
   XMLHttpRequest.send (async)     
   load    @   three.js:30563
   load    @   index.js:56
   (anonymous) @   main.ts:117
   (anonymous) @   index.js:36
   (anonymous) @   three.js:30090
   XMLHttpRequest.send (async)     
   load    @   three.js:30146
   load    @   index.js:34
   s   @   _prelude.js:1
   e   @   _prelude.js:1
   (anonymous) @   _prelude.js:1
   

2. 仅使用三个 obj-loader 即可正常工作（如此处所述：Uncaught TypeError: THREE.MTLLoader is not a constructor）

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) 并将它们放在文件夹 three/src/loaders 中，然后在 three.js 中包含以下内容：

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

然后尝试像这样加载它们：

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>) 中加载它们的示例。我对打字稿很陌生，所以我不确定是否应该创建一个参考路径，或者如何实现这一点。

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

4. 我尝试做的最后一件事是加载实际上在三个示例中的 obj 和 mtl 加载器，我在 three.js 文件中引用它：export { OBJLoader } from '../examples/js/loaders/OBJLoader.js' 但给出了相同的“不”构造函数的错误 `

Answer 1

聚会有点晚了，但您可以通过利用 imports loader 和 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 之前用逗号分隔它们。

这有点傻，但它让我们无需依赖可能与您当前版本的三个不匹配的自定义包即可工作。我在使用 TypeScript 2.9.2 构建的 React 应用程序中成功地将其与 MTLLoader 和 OBJLoader 一起使用。