THREE.js 不会加载我的 .mtl 和 .obj 文件
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);
});
可以convert the file to glTF here,然后加载如下:
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 and THREE.GLTFLoader 的文档。
three.js r92.
我正在尝试使用 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);
});
可以convert the file to glTF here,然后加载如下:
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 and THREE.GLTFLoader 的文档。
three.js r92.