我已经使用 Three.js 几个星期了,我设法将纹理应用于直接通过代码创建的立方体,但是一旦我尝试使用 OBJLoader
加载 OBJ 文件,我注意到我无法使用相同的方法通过 TextureLoader
加载简单的 png 或 jpg 纹理。
现在我不完全确定出了什么问题,如果这不是正确的方法,如果我不能很好地加载简单的图像,或者如果我没有正确应用它。
我发现使用 MTL 文件应用纹理似乎很容易,但不幸的是我不确定如何制作。
我当前的代码看起来像这样:
var loader = new THREE.OBJLoader( manager );
loader.load( 'models/tshirt.obj', function ( object ) {
object.position.x = 0;
object.position.y = -200;
object.scale.x = 10;
object.scale.y = 10;
object.scale.z = 10;
obj = object;
texture = THREE.TextureLoader('img/crate.png'),
material = new THREE.MeshLambertMaterial( { map: texture } );
mesh = new THREE.Mesh( object, material );
scene.add( mesh );
} );
但这似乎行不通。该模型无法加载并给我来自 Three.js 的随机错误。如果我更改 scene.add( obj);
而不是上面的代码,模型将实际加载。
我应该在这里做什么?我应该继续尝试制作 MTL 文件吗?
可以在 http://creativiii.com/3Dproject/old-index.html 查看我的完整工作代码
编辑:添加网格而不是对象时出现的错误是
three.min.js:436 Uncaught TypeError: Cannot read property 'center' of undefined
最佳答案
试试这段代码:
var OBJFile = 'my/mesh.obj';
var MTLFile = 'my/mesh.mtl';
var JPGFile = 'my/texture.jpg';
new THREE.MTLLoader()
.load(MTLFile, function (materials) {
materials.preload();
new THREE.OBJLoader()
.setMaterials(materials)
.load(OBJFile, function (object) {
object.position.y = - 95;
var texture = new THREE.TextureLoader().load(JPGFile);
object.traverse(function (child) { // aka setTexture
if (child instanceof THREE.Mesh) {
child.material.map = texture;
}
});
scene.add(object);
});
});
纹理加载更改取自:How to apply texture on an object loaded by OBJLoader? .
关于javascript - Three.js objloader + 纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39850083/