[英]THREE.js won't to load my .mtl and .obj file
我正在尝试使用three.js创建3D模型查看器,但不会加载任何.mtl和.obj文件。 我遵循了本教程https://manu.ninja/webgl-3d-model-viewer-using-three-js/,但它仅加载女性模型。
这是我的脚本:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl('models/rayman2');
mtlLoader.setPath('models/rayman2');
mtlLoader.load('rayman_2_mdl.mtl', function (materials) {
materials.preload();
materials.materials.default.map.magFilter = THREE.NearestFilter;
materials.materials.default.map.minFilter = THREE.LinearFilter;
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('models/rayman2');
objLoader.load('rayman_2_mdl.obj', function (object) {
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
scene.add(object);
}, null, null);
});
您可以在此处将文件转换为glTF ,然后按以下方式加载:
var loader = new THREE.GLTFLoader();
loader.load('rayman.glb', function (gltf) {
var content = gltf.scene;
content.traverse((node) => {
if (!node.isMesh) return;
node.material.side = THREE.DoubleSide;
node.material.alphaTest = 0.25;
node.material.needsUpdate = true;
});
scene.add(content);
}, undefined, function (e) {
console.error(e);
});
向glTF的转换只是简化了事情。 其他更改解决了模型中的问题: THREE.DoubleSide
确保角色头发的两面都可见,而alphaTest
确保纹理中的透明度正确显示。
请参阅文档THREE.Material和THREE.GLTFLoader 。
three.js r92。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.