threejs第五篇【一条龙测试之四 threejs 给obj模型贴图】

由于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;