three.js 关于obj模型加载后坐标全部为(0, 0, 0)的解决方案 您所在的位置:网站首页 threejs怎么读 three.js 关于obj模型加载后坐标全部为(0, 0, 0)的解决方案

three.js 关于obj模型加载后坐标全部为(0, 0, 0)的解决方案

2023-08-22 09:49| 来源: 网络整理| 查看: 265

three.js 实战 关于obj模型加载后坐标全部为(0, 0, 0)的解决方案 概述测试obj模型测试gltf模型

概述

相信大家在加载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中导入模型后选择模型,设置模型的原点,将模型的原点改到自己本身,在进行导出即可。

经过测试得到的结果,如果错误,请指正。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有