Three.js中的纹理Texture

总序

有了材质，总想让它更好看点，像我最近做的一个小“代码情书”的demo。不仅仅将照片纹理添加到方块网格中，而且还将这些方块组成一个球体，下面LOVE四个按钮，可以转换成不同的效果，有照片墙，照片环等。

• 
  
  • -

• ImageUtils.loadTexture：从指定位置加载图片文件，文件格式可以是PNG，GIF或JPEG文件。

  ImageUtils.loadTexture

  2个很关键的值得注意的点：

• 这个方法是异步调用的，所幸的是使用了render循环，这样每秒能被渲染几十次，并不会影响渲染的效果

• 图片的长宽大小最好是2的次方256*256 512*512等。我曾看到如果使用不是类似这样的长宽，Three..js会将其压缩。

加载纹理的方法

通常，加载纹理可理解为加载图片，然后贴在材质上，一个常用的套路就是写一个函数，用来加载图片，然后返回网格，实例代码如下

function createMesh(geom, imageFile) {
   var texture = THREE.ImageUtils.loadTexture(imageFile);
   var mat = new THREE.MeshPhongMaterial();
   mat.map = texture;//材质的Map属性用于添加纹理
   var mesh = new THREE.Mesh(geom, mat);
   return mesh;
}

所以，如果给球体添加一个木质纹理属性，就会看起来像这个样子

var sphere = createMesh(new THREE.SphereGeometry(5, 20, 20), "floor-wood.jpg");
scene.add(sphere);

当然你可以试试，在球上添加自己的照片，或者是风景，如我最开始展现的那张图那样。还蛮有意思的。

让纹理更立体点—>灰度凹凸贴图

材质除了使用map属性来添加纹理，还有另一个蛮好用的属性叫做bumpMap属性，bump的英文意思的凹凸贴图，凸块等。所以稍微修改下createMesh方法。

function createMesh(geom, imageFile, bump) {
            var texture = THREE.ImageUtils.loadTexture(imageFile);
            geom.computeVertexNormals();
            var mat = new THREE.MeshPhongMaterial();
            mat.map = texture;
            if (bump) {
                var bump = THREE.ImageUtils.loadTexture(bump);
                mat.bumpMap = bump;
                mat.bumpScale = 0.2;
            }
            var mesh = new THREE.Mesh(geom, mat);
            return mesh;
        }

对于上述代码，将创建2个Mesh进行对比，一个存在bumpMap一个不存在。

        var sphere1 = createMesh(new THREE.BoxGeometry(15, 15, 2), "stone.jpg");

        sphere1.rotation.y = -0.5;
        sphere1.position.x = 12;
        scene.add(sphere1);
        var sphere2 = createMesh(new THREE.BoxGeometry(15, 15, 2), "stone.jpg", "stone-bump.jpg");
        sphere2.rotation.y = 0.5;
        sphere2.position.x = -12;

效果如下图，很明显左边这墙更有感觉。

把它换成地球地图看下效果，效果不是很明显，但是仔细看还是有效果的

创建一个cubeMap，让你身处环境中

创建一个cubeMap，让自己感觉身处在，城市，大自然中。需要6张照片构成整个场景，然后通过相机控件的移动放大缩小等可以很好地感受环境。

• 创建cubeMap对象，需要6个纹理，贴在6个面上

    function createCubeMap() {

        var path = ".cubemap/nature/";//nature 可以修改为不同文件夹下的纹理
        var format = '.jpg';
        var urls = [
            path + 'posx' + format, path + 'negx' + format,
            path + 'posy' + format, path + 'negy' + format,
            path + 'posz' + format, path + 'negz' + format
        ];
        var textureCube = THREE.ImageUtils.loadTextureCube(urls, new THREE.CubeReflectionMapping());
        return textureCube;
    }

创建了这些场景，然后你肯定很想知道6张照片从哪里来的，怎样拼起来才看不出来是混拼的而是有一定的耦合关系，其实这个很简单，因为这些图片是从
http://www.humus.name/index.php?page=Textures这个地方下载下来的，你肯定可以找到你想要的，然后下载下来然后作为场景背景。看起来很不错吧。

定制UV映射纹理和Canvas画布纹理