工具: 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 期待和大家交流问题共同进步