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，显示加载进度百分比。

主体窗口div canvas3d 显示3D场景

另外，网页窗口变化，3D场景比例也要适配：

//窗口变化时，3D窗口也会动态适配
    window.onresize = function(){
        var w = document.getElementById("canvas3d").clientWidth;
        var h = document.getElementById("canvas3d").clientHeight;
         
        camera.aspect = w/h;
        camera.updateProjectionMatrix();
        renderer.setSize(w,h); 
    }

完整代码：