threejs纹理

Posted 2020-11-09 刘世涛619247

纹理

纹理用来表现物体的细节。理论上可以将物体的每个细节建模出来，但是这样时间成本和性能成本都太高，因此，将物体的一些细节用纹理来表示。

图片纹理

图片纹理直接在物体表面应用图片。可以使用TextureLoader类的load方法来加载纹理。

function loadImgTexture(){
    var loader = new THREE.TextureLoader();
    loader.load("metal-rust.jpg",function(texture){
        var geometry = new THREE.BoxGeometry(10,10,10);
        var material = new THREE.MeshBasicMaterial({color:0x739783,map:texture});
        mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);
    })
}

 

注意加载图片是异步的，所以这里我们使用render循环来渲染：

function render(){
    requestAnimationFrame(render);
    renderer.render(scene,camera);
}

 

凹凸贴图

凹凸贴图可以使纹理也有厚度，看起来更立体。凹凸贴图一般使用一张灰度图，设置成材料的bumpMap属性

function loadImgTexture(){
    var loader = new THREE.TextureLoader();
    loader.load("stone.jpg",function(texture){
        loader.load("stone-bump.jpg",function(bumpTexture){
            var geometry = new THREE.BoxGeometry(10,10,10);
            var material = new THREE.MeshPhongMaterial({map:texture,bumpMap:bumpTexture,bumpScale:0.2});
            mesh = new THREE.Mesh(geometry,material);
            mesh.rotation.x = 30/180Math.PI;
            scene.add(mesh);
        })
    })
}

 

凹凸贴图虽然看起来更立体，但是其只是有深度，没有方向，所以只有在某个方向看是很立体，在其它方向看又不好。如果贴图的对象不怎么转动，光线也不怎么变化，倒可以使用凹凸贴图。

法向贴图

法向贴图使用一张法向图来表示纹理图片某个点的法向量。即用一张图片保存另一张图片的法向量信息，然后再在threejs中将这两个图片的信息合在一起，就形成了一个细节丰富的立体纹理。创建法向贴图如下，注意这里不要再使用MeshBasicMaterial：

function loadImgTexture(){
    var loader = new THREE.TextureLoader();
    loader.load("plaster.jpg",function(texture){
        loader.load("plaster-normal.jpg",function(normalTexture){
            var geometry = new THREE.BoxGeometry(10,10,10);
            var material = new THREE.MeshPhongMaterial({map:texture,normalMap:normalTexture,bumpScale:0.2});
            mesh = new THREE.Mesh(geometry,material);
            mesh.rotation.x = 30/180Math.PI;
            scene.add(mesh);
        })
    })
}

法向贴图可以生成细节丰富的纹理，同时不损害渲染性能。但是法向图这张图片创建起来稍有困难，使用Blender或Photo创建。

光照贴图

环境贴图

环境贴图是使用上下左右前后六张图或者一张全景图来模拟真实的环境，threejs会将这些图片渲染成无缝的环境盒子，例子可看【threejs-cubeMap例子】，其中貌似真实的环境，球的反光效果，都是用这张全景图渲染出来的： 

球的反光看起来非常逼真，但其实是假的，也就四并没有使用光线追踪来表现出反光效果。光线追踪是很耗cpu的，所以，使用环境贴图即节约性能，又能表现出很逼真的效果。

UV贴图

关于uv贴图，【blender wiki】里面说得很好：

UV贴图是将2D纹理映射到3D物体最灵活的一种方式.在这个过程中三维曲面网络("mesh")的X Y Z被展平到一副二维(X Y 或者说 我们将要看到的 U V)图片中,这样图片中的颜色就被映射到曲面网络("mesh")中。
有助于理解UV贴图的最形象的比喻是切开一个硬纸盒.盒子是一个三维物体,正如同加到场景中的一个曲面网络("mesh")方块.
如果沿着边缝或折痕剪开盒子,可以把盒子摊开在一个桌面上.当我们从上往下俯视桌子时,我们可以认为U是左右方向,V是上下方向.盒子上的图片就在一个二维坐标中.我们使用U V代表"纹理坐标系"来代替通常在三维空间使用的 X Y.

如果给模型的每个面都用一张图片去贴纹理，这将要加载很多纹理图片，如果可以只将图片的某个部分映射到模型，那就只需要一张图片就够了。uv贴图就能够将图片的某部分映射到模型的某个面，如果还不好理解，类比一下CSS Sprite技术。比如，上一篇【加载3D模型例子】例子中，我们用到了一张图片： 

这张图里面凌乱的放着摊开的人皮、衣服、手、眼睛等图片元素。而我们加载出来的模型是这样的： 

在这张图中，脸是脸，衣服是衣服，都在它们应该出现的位置。这便是使用了uv映射，将图中的某部分作为纹理，贴到模型中的对应部分。

但是，图中的各个部分，是怎么和模型对应起来的呢？一个人的模型有那么多个面，纯手工编码一个个去对应，感觉会出人命。其实，uv贴图一般是做模型的时候就做好了，图和模型的对应关系也包含在模型文件（就是那个.dae文件）中了，编程的时候一般是不用关心这个。

虽说如此，我们加载模型之后，也可以通过Geometry对象的faceVertexUvs属性看看具体是怎么映射的。简单起见，创建一个BoxGometry，查看一个其内置的uv映射：

var geom = new THREE.BoxGeometry(24, 24, 24);
console.log(geom.faceVertexUvs);

 

打印出：

是一个有12个元素的数组，12代表的就是立方体的12个三角面。再看数组的具体某一个元素：

又是一个长度为3的Vector2数组，代表纹理图片中的三个位置，这三个点围成的部分就是这个三角面的纹理。上面的（0，0），（1,0），（1,1）都是比例，0代表0%，1代表100%。点是从右下角开始按逆时针排列的，比如A（0，0），B（1,0），C（1,1）三点，在图片中围成的区域如下： 

将这张图加载到立方体，能更清晰立方体是如何通过uv映射来处理纹理的，【例子】。

---

【持续更新看这里】