三-mtl-loader 错误:THREE.MeshPhongMaterial:.shading 已被删除 ->对象不可见 [英] three-mtl-loader error: THREE.MeshPhongMaterial: .shading has been removed -> object not visible
问题描述
昨天我问了这个问题(未捕获的类型错误:THREE.MTLLoader 不是构造函数 2.0)，我以为我终于开始工作了，但现在却出现了新问题:
Yesterday I asked this question (Uncaught TypeError: THREE.MTLLoader is not a constructor 2.0), which I thought that I had finally gotten to work, but now new questions have instead emerged:
我已经使用 npm 安装了three-mtl-loader"，但现在似乎该对象不可见，尽管我可以console.log 以自己的方式查看该对象是否存在.
I have installed 'three-mtl-loader' using npm, but now it seems that the object isn't visible, eventhough I can console.log my way into seeing that the object exists.
出于某种原因，它现在吐出以下错误，我想这就是它不可见的原因:
For some reason it now spits out the following error, and I guess that that is why it is not visible:
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)
...
我现在的代码如下所示:
The code as I have it now looks like this:
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，因为如果我例如插入:
I am not quite sure whether it is a problem similar to this one: https://github.com/sohamkamani/three-object-loader/issues/9, because if I e.g. insert:
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 - 我不想手动更改加载程序.
A white mesh is inserted - but I wouldn't know how to insert the mtl-file as color, because in the example they use getHex(). And it also seems like something that would take a long time, if I would have to do it for each mesh individually (I am cloning the model because I need two). Or could I in some way use object.traverse - I don't want to manually change the loader.
非常感谢任何帮助:D
编辑我现在尝试了很多不同的方法，但都没有奏效，所以我将在这里总结问题，希望有人能看到它的错误:
EDIT I have now tried many different approaches, with non of them working just yet, so I will sum up the issues here, hoping that someone can see what it wrong:
上面提到的方法，并在评论中解释了为什么它不起作用.我更新到了 3 的最新版本，现在我得到了同样的错误，但只是作为警告，并且对象仍然不可见.现在错误似乎来自其他方面.如果我在 OBJloader 中将其更改为 flatshading，警告就会消失，但对象仍然不可见 - 我真的不想更改文件.
The approach mentioned above, and it is explained why it doesn't work in the comments. I updated to the newest version of three, and now I get the same error but only as a warning, and the objects are still not visible. The error seems to come from something else now. If I change it to flatshading in the OBJloader the warning disappear but the objects are still not visible - and I really don't want to change the files.
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
仅使用三 obj-loader 工作正常(如此处所述:未捕获的类型错误:THREE.MTLLoader 不是构造函数)
复制 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中包含以下内容:
Copying the OBJLoader and MTLLoader (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) and putting them in the folder three/src/loaders and then including the following in the three.js:
从 './loaders/MTLLoader.js' 导出 { MTLLoader}从 './loaders/OBJLoader.js' 导出 { OBJoader}
export { MTLLoader} from './loaders/MTLLoader.js' export { OBJoader} from './loaders/OBJLoader.js'
然后尝试像这样加载它们:
And then trying to load them like this:
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>).我对打字稿很陌生，所以我不确定是否应该创建一个参考路径，或者如何实现这一点.
and using them in the same way as above results in a Uncaught TypeError: THREE.MTLLoader is not a constructor and when trying to console.log(MTLLoader) or console.log(OBJLoader) they are both undefined. So I am not sure whether they are loaded correctly into the framework, as I can only find examples of loading them in html (<script src="js/loaders/OBJLoader.js"></script>).I am pretty new to typescript, so I am not sure if I should create a reference path, or how one would come about this.
如果我尝试使用 OBJLoader2，也会出现同样的问题.
The same problem occurs if I try to use OBJLoader2.
- 我尝试做的最后一件事是加载实际上在三个示例中的 obj 和 mtl 加载器，我在 Three.js 文件中引用了它:
export { OBJLoader } from '../examples/js/loaders/OBJLoader.js'但这给出了相同的不是构造函数"错误`
- The final thing I have tried to do, was to load the obj and mtl loader that is actually in three under examples, where I reference to it in the three.js file:
export { OBJLoader } from '../examples/js/loaders/OBJLoader.js'but that gives the same 'not a constructor' error `
推荐答案
聚会有点晚，但您可以通过利用 使用 webpack 导入加载器.
A little late to the party but you can work around the need for alternative three.js loader npm packages by leveraging imports loader with webpack.
// 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，但是我们要求加载器，所以我们有机会为它们提供全局THREE 他们需要.如果您遇到需要两次导入的依赖项，例如 FBXLoader，您可以在 !path-to-file.js 之前用逗号分隔它们.
The gist of this is that we import to satisfy TypeScript, but we require the loaders explicitly so we have an opportunity to feed them the global THREE that they need. If you run into a dependency that requires two imports, like FBXLoader, you can separate them with commas before the !path-to-file.js.
这有点愚蠢，但它让我们可以工作，而不必依赖可能与您当前版本的 3 不匹配的自定义包.我在使用 TypeScript 2.9.2 构建的 React 应用程序中成功地将它与 MTLLoader 和 OBJLoader 一起使用.
It's a little goofy but it lets us work without having to rely on custom packages that might not match your current version of three. I'm successfully using this with both MTLLoader and OBJLoader in a React app built with TypeScript 2.9.2.
这篇关于三-mtl-loader 错误:THREE.MeshPhongMaterial:.shading 已被删除 ->对象不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
