three.js給平面添加紋理順序簡單講解

//場景 scene 

//相機 camera

//渲染器 render

//燈光 light

省略不寫

 

// 1.  創建幾何體 這里是平面  寬960 高480 上面的網格是1 

var geometry = new THREE.PlaneGeometry(960,480,1,1);

//幾何體創建紋理坐標 好像是四個角

       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);

//2 獲取紋理里面的圖片 這個不同的版本會有不同的方法 

var texture = THREE.ImageUtils.loadTexture(

               // "img3/1.png", 這個是相對位置也行

                " http://172.16.7.191/ankangtong/three/img3/1.png",//這個是網絡位置也行 不過大部分寫

                null,function(t){}

        );

//3 創建材質 里面加紋理 因為上面的紋理里面有圖片 所以相當於在材質上面貼圖片

//有單面貼和兩面貼 這里是里面貼 主注意括號里面的map，map里面放上面下載到的紋理（這里是圖片）對象

var material  = new THREE.MeshBasicMaterial({map:texture,transparent:true});

material.side=THREE.DoubleSide;//單面貼就刪除

 

//4 創建網格平面 需要幾何圖形和材質 

var mesh = new THREE.Mesh(geometry,material);

scene.add(mesh);//加入到場景

然后設置這個mesh位置旋轉什么的

最后記得渲染

renderer.render( scene, camera );