1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 【H5 3D应用开发】Blender 制作导出Obj模型带纹理到three.js(二)

【H5 3D应用开发】Blender 制作导出Obj模型带纹理到three.js(二)

时间:2021-05-20 06:11:13

相关推荐

【H5 3D应用开发】Blender 制作导出Obj模型带纹理到three.js(二)

工具: Bender2.7.8.0 + three.js忘记了多少了

QQ:453738784

1、首先正常打开一个Blender 我们看到一个正方形

选择编辑模式后 选中你要添加纹理的面 然后按下键盘U

切换到UV界面

这就是UV界面了 打开一张图片

选好图片后 选择渲染模式 –》纹理

图片就贴上去了

其他面步骤一样

然后导出

Three.js

// modelvaronProgress = function ( xhr ) {if (xhr.lengthComputable ) {varpercentComplete = 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('obj/male02/' );mtlLoader.load('Box.mtl', function( materials ) {materials.preload();varobjLoader = new THREE.OBJLoader();objLoader.setMaterials(materials );objLoader.setPath('obj/male02/' );objLoader.load('Box.obj', function ( object ) {object.scale.set(50,50,50);object.position.y= 0;scene.add(object );},onProgress, onError );});

用Three.js加载的时候发现一个错误

原因是我们的贴图文件还没有复制上去 复制贴图文件和obj同一个目录

记事本打开

修改

模型正常显示

Three.js源码我就不上传了 对应的是Three.js 例子里面的

我之前对应网上的教程来做的时候 发现贴图文件出不了来误导了我2天一直在找问题 而且网上的资源少之又少,后来发现原来材质和纹理我弄错了 我以为这样渲染出来的模型可以直接导出使用但Three.js 偏偏找不到纹理。低版本的Three.js还出现缺面的情况。

还有什么不明白的 可以Q我:453738784 期待和大家交流问题共同进步

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。