THREE實戰4_3D紋理

圖片紋理

maya中的UV測試

uv就是把物體的表面全部展開，添加圖片，像皮膚一樣
這邊我加載一個png圖片

分割六個面，組合圖片

THREE中的紋理構造函數

THREE.Texture(image,mapping,wrapS,wrapT,magFilter,minFilter,format,type,anisotropy);

參數	含義
image	圖片類型
mapping	圖像將如何應用到物體（對象），默認值是THREE.UVMapping對象類型，UV座標被用於紋理映射
wraps	x軸紋理的迴環方式，當紋理寬度小於需要貼圖的平面的寬度的時候，平面剩下的部分應該以何種方式貼圖問題
wrapT	y軸迴環方式
magFilter	過濾方式，OpenGL的基本概念
minFilter	過濾方式，OpenGL的基本概念
format	圖片格式有RGBAFormat，RGBAFormat等
type	表示存儲紋理內存的每一個字節的格式，int、float等，這裏默認無符號型（THREE.UnsignedByte Type）
anisotropy	各向異性過濾，爲了紋理效果更好，消耗更多的內存、cpu、gpu

爲平面賦予紋理二維UV座標

            geometry.vertices[0].uv=new THREE.Vector2(0,0);
            geometry.vertices[1].uv=new THREE.Vector2(1,0);
            geometry.vertices[2].uv=new THREE.Vector2(1,1);
            geometry.vertices[3].uv=new THREE.Vector2(0,1);//逆時針

loadertexture函數

            var texture=THREE.ImageUtils.loadTexture("M.png",null,function (t) {
            });//加載圖片

參數	含義
第一個參數路徑	相對路徑
第二個參數null	紋理座標參數覆蓋geometry的參數
第三個參數function(t)	回調函數，成功加載紋理後需要執行的函數，參數爲texture

指定材質紋理映射

            var material=new THREE.MeshBasicMaterial({map:texture});//紋理映射
            mesh = new THREE.Mesh( geometry,material);

代碼重構

1.渲染背景橙黃色0xfd971f，背景顏色。

renderer.setClearColor(0xfd971f, 1.0);//橙黃色背景利於觀察正方體

2.透視相機就位

        var camera;
        function initCamera() {
        camera = new THREE.PerspectiveCamera(120, width/height, 1, 1000);
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 700;
        camera.up.x = 0;//相機朝向位置
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt(new THREE.Vector3(0,0,0));
        }

3.白色環境光就位

        function initLight() {
            var light=new THREE.AmbientLight(0xffffff);//白色環境光，無處不在
            var light_help=new THREE.SphereGeometry(16,16,16);
            light.add(new THREE.Mesh(light_help,new THREE.MeshBasicMaterial({color:0xffffff})));//白色
            scene.add(light);
        }

4.創建box

        var mesh=null;//全局變量
        function initObject() {
            var geometry = new THREE.CubeGeometry(300,300,300);//幾何體
            var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );//白色
            mesh = new THREE.Mesh( geometry,material);
            mesh.position = new THREE.Vector3(0,0,0);
            scene.add(mesh);
        }

5.紋理貼圖準備,重構幾何體材質代碼

        var mesh=null;//全局變量
        function initObject() {
            var geometry = new THREE.CubeGeometry(300,300,300);//幾何體
            geometry.vertices[0].uv=new THREE.Vector2(0,0);
            geometry.vertices[1].uv=new THREE.Vector2(1,0);
            geometry.vertices[2].uv=new THREE.Vector2(1,1);
            geometry.vertices[3].uv=new THREE.Vector2(0,1);
            var texture=THREE.ImageUtils.loadTexture("demo1.jpg",null,function (t) {
            });
            var material=new THREE.MeshBasicMaterial({map:texture});//紋理映射
            //var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );//白色
            mesh = new THREE.Mesh( geometry,material);
            mesh.position = new THREE.Vector3(0,0,0);
            scene.add(mesh);
        }

6.爲了利於觀察，循環渲染加上box旋轉

        function animation()
        {
            mesh.rotation.y+=0.01;//繞y軸旋轉
            renderer.render(scene, camera);
            requestAnimationFrame(animation);//遞歸調用
            stats.update();//fps
        }

測試的圖片紋理

ok，奈斯運行看效果！

沒問題！