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