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

2024-05-13

昨天我问了这个问题(未捕获的类型错误:THREE.MTLLoader 不是构造函数 2.0 https://stackoverflow.com/questions/47741644/uncaught-typeerror-three-mtlloader-is-not-a-constructor-2-0),我以为我终于开始工作了,但现在却出现了新的问题:

我已经使用 npm 安装了“三 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 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

EDIT我现在已经尝试了很多不同的方法,但还没有一个有效,所以我将在这里总结一下问题,希望有人能看到哪里出了问题:

  1. 上面提到的方法,并在评论中解释了为什么它不起作用。我更新到了三个的最新版本,现在我得到了相同的错误,但仅作为警告,并且对象仍然不可见。现在错误似乎来自其他地方。如果我在 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. 仅使用三对象加载器就可以正常工作(如下所述:未捕获的类型错误:THREE.MTLLoader 不是构造函数 https://stackoverflow.com/questions/46989337/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/OBJLoader.js and https://github.com/mrdoob/ Three.js/blob/master/examples/js/loaders/MTLLoader.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) or console.log(OBJLoader)它们都是未定义的。所以我不确定它们是否正确加载到框架中,因为我只能找到在html中加载它们的示例(<script src="js/loaders/OBJLoader.js"></script>)。我对打字稿还很陌生,所以我不确定是否应该创建一个参考路径,或者如何实现这一点。

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

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

虽然有点晚了,但你可以通过利用替代的 Three.js 加载器 npm 包来解决这个问题进口装载机 https://github.com/webpack-contrib/imports-loader与网页包。

// 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 一起使用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

三-mtl-loader 错误:THREE.MeshPhongMaterial:.shading 已被删除 -> 对象不可见 的相关文章

随机推荐