本文目录一览：
如何使用Three.js加载obj和mtl文件
使用Three.js加载obj和mtl文件方法：
var onProgress = function(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + ‘% downloaded’);
}
};
var onError = function(xhr) {};
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath(‘/uploads/160601/obj/’);
mtlLoader.load(‘egg.mtl’, function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath(‘/uploads/160601/obj/’);
objLoader.load(‘egg.obj’, function(object) {
object.position.y = -0.5;
scene.add(object);
}, onProgress, onError);
});
ThreeJS渲染一个.obj三维模型文件（Vue）
先来看一个效果：
最近有个项目需要实现三维模型的web端渲染，以前虽然也做过类似的项目，单是两个项目一个是java Application，一个是安卓结合，两个我都只参与到的建模环节，所以知道三维模型文件的大概结构，要想在web端实现渲染，首先要做的就是读取这些模型文件，对里面的点、面、法线、材质进行逐行解析。
各种对比后，发现了ThreeJS。它不仅可以解析obj模型文件，还可以解析大部分市场上有的模型格式文件。
npm 安装后，在node_modules/three/examples/jsm/loaders/目录下可以看到它支持的模型格式。
PS：demo中使用了最流行vue语法。
组件注销前，解绑全局事件、停止刷新。beforeDestroy()
效果如下：
PS：鼠标移入时，先暂存材质的颜色，移除后再恢复。实现过程有bug，getHex()未得到有效的颜色，所以恢复不到原有的材质颜色，正在查找原因。如有有哪位大神发现问题，请赐教。
优化内容：
2.页面组件销毁时，解绑鼠标事件
3.组件销毁时，清除缓存数据
关于three.js导入obj模型后进行移动的问题
我之前用three.js写过demo不是很熟，但思路应该是，new 一个 Object3D
然后add(加载的对象)
移动这个整体的对象就行了
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/292031.html
微信扫一扫 
支付宝扫一扫 