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

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

QQ：453738784

 

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

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

 

 

 

切换到UV界面

 

 

 

 

 

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

 

 

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

 

 

图片就贴上去了

其他面步骤一样

 

然后导出

 

 

Three.js

// model                                   varonProgress = 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  期待和大家交流问题共同进步