由于OBJ没有纹理信息, 需要threejs来加载外部贴图,来指定给模型!
//模型需要纹理Texture
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
loader.load( 'knotTex.png', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
} );
//obj加载的类如图:
//obj加载,构造函数的参数是LoadingManager
var loader = new THREE.OBJLoader(manager);
//加载方法有4个参数,分别是obj文件路径,加载完毕回调,加载进度回调,错误回调。
//我们先把几个回调写好
//加载完毕回调如下,加载完毕,我们做的就是把模型加载到场景中
var onLoad = function(object){
//加载模型如何指定Texture呢?
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
scene.add( object);
}
我们给个加载进度吧,
使用CSS做2个块样式,页面顶部div progress,显示加载进度百分比。
<style type="text/css">
#progress{
margin:0;
line-height:40px;
font-weight:bold;
color:#fff;
text-align:center;
background-color:#ff0000;
}
</style>
主体窗口div canvas3d 显示3D场景
<style type="text/css">
#canvas3d{
margin:0;