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