three.js 关于obj模型加载后坐标全部为(0, 0, 0)的解决方案
概述
相信大家在加载obj模型的时候都遇到过这种类似的问题。本来我的模型的坐标是不在原点(0, 0, 0)的,为什么在控制台中打印出来的模型坐标都是(0, 0, 0)呢,针对这个问题我做了测试,给出了具体的解决方案和问题点。
测试obj模型
第一步我们首先在three的编辑器中加载一个box,然后朝X轴方向移动4像素。此时我们的物体坐标为(4, 0, 0),然后我们将模型给导出成obj格式。
最后我们在场景中加载这个导出的obj文件,并打印出当前我们的模型信息
加载模型代码:
const objLoader = new THREE.OBJLoader();
objLoader.load('./model.obj', function (model) {
console.log(model);
scene.add(model);
})
在控制台打印模型信息
此时我们在控制台可以看到模型的位置全部都是(0, 0, 0)。这就很奇怪了,本来我们建模时给的位置是(4, 0, 0),最后得到的结果最不是我们想要的,此时我们想要移动物体就变得异常困难,我们如果想把物体给移动到原点,我们就必须要设置(*-4, 0, 0)才可以,这个地方我去阅读了OBJLoader.js的源码,发现此处是three,js的一处bug,在解析完mesh的顶点坐标后并未对定位做解析。
测试gltf模型
此时我们将同一个模型从编辑器导出,此时我们将格式改为gltf的进行测试
加载模型代码
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('./scene.gltf', function (object) {
console.log(object);
scene.add(object.scene);
})
此时我们可以看到导出的模型的位置已经正确,拥有了正常的position定位信息,然后我们在设置一下box的位置
let mesh = object.scene.children[0];
mesh.position.set(0, 0, 0);
在最后我们总结出obj模型确实是会有位置属性的bug,所以在以后我们的开发中避免使用obj模型来进行开发,选用web端效率最高的gltf模型。
最终提供的解决方案是转换模型文件的格式
第一种情形:在和建模师和合作时,不要让建模师提供obj格式的文件,obj模型还没有层级关系,要求建模师提供gltf或者fbx都可以。
第二种情形:我们自己在网站上下载的obj模型的处理方式,下载一个建模软件,比如blender,在blender中导入模型后选择模型,设置模型的原点,将模型的原点改到自己本身,在进行导出即可。
经过测试得到的结果,如果错误,请指正。