学习Three.js——纹理(Texture)

一般使用THREE.ImageUtils.loadTexture(img_path)将图像加载为纹理，然后将纹理赋给材质的map属性，

其中我们可以选择纹理放大和缩小使用的插值算法。

THREE.NearestFilter、THREE.LinearFilter、THREE.NearestMipMapNearestFilter、THREE.NearestMipMapLinearFilter、THREE.LinearMipMapNearestFilter和THREE.LinearMipMapLinearFilter

详细说明自行百度。

使用凹凸贴图创建皱褶

使用凹凸贴图创建一种新的纹理，将其赋给材质的bumpMap属性，并调整bumpScale即可获得凹凸的效果

function createMesh(geom, imageFile, bump) {
            var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
            geom.computeVertexNormals();
            var mat = new THREE.MeshPhongMaterial();
            mat.map = texture;

            if (bump) {
                var bump = THREE.ImageUtils.loadTexture("../assets/textures/general/" + bump);
                mat.bumpMap = bump;
                mat.bumpScale = 0.2;
                console.log('d');
            }


            // create a multimaterial
            var mesh = new THREE.Mesh(geom, mat);

            return mesh;
        }

使用法向贴图创建更加细致的凹凸和皱褶

凹凸贴图只有高度信息而没有斜角的信息，使用法向贴图，当光照从侧面照过来，可以看到阴影效果

和上面类似，将法向贴图纹理赋给材质的normalMap属性即可

function createMesh(geom, imageFile, normal) {

                var t = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
                var m = THREE.ImageUtils.loadTexture("../assets/textures/general/" + normal);
                var mat2 = new THREE.MeshPhongMaterial();
                mat2.map = t;
                mat2.normalMap = m;

                var mesh = new THREE.Mesh(geom, mat2);
                return mesh;
            
        }

使用光照贴图创建阴影效果

简单地说就是当没有光线照射的情况下，当物体放置在该网格上时，会产生阴影效果

只需要设置材质的lightMap属性即可

        var groundMaterial = new THREE.MeshBasicMaterial(
                {
                    color: 0x777777,
                    lightMap: lm,
                    map: wood
                });
		//这个要设置好，暂不知道有什么用
        groundGeom.faceVertexUvs[1] = groundGeom.faceVertexUvs[0];

使用环境贴图产生反光效果

使用高光贴图增强某部分的高光效果，只需要将纹理赋给材质的specularMap属性并设置specular高光部分的颜色和shininess设置高光的强度即可

function createMesh(geom) {
            var planetTexture = THREE.ImageUtils.loadTexture("../assets/textures/planets/Earth.png");
            var specularTexture = THREE.ImageUtils.loadTexture("../assets/textures/planets/EarthSpec.png");
            var normalTexture = THREE.ImageUtils.loadTexture("../assets/textures/planets/EarthNormal.png");


            var planetMaterial = new THREE.MeshPhongMaterial();
            planetMaterial.specularMap = specularTexture;
            planetMaterial.specular = new THREE.Color(0xff0000);
            planetMaterial.shininess = 2;

            planetMaterial.normalMap = normalTexture;
//            planetMaterial.map = planetTexture;
            //   planetMaterial.shininess = 150;


            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);

            return mesh;
        }

自定义UV映射

重复纹理

通过设置geometry.material.map.wrapS和geometry.material.map.wrapT来改变x,y轴方向的重复状态，可以选择两种属性：

扫描二维码关注公众号，回复： 4622229 查看本文章

THREE.RepeatWrapping：允许纹理重复

THREE.ClampToEdgeWrapping：不允许纹理重复，使用纹理的边缘填充剩余部分

可以通过geometry.material.map.repeat.set(repeatX,repeatY)来设置在x,y轴的重复频率

使用画布作为纹理

	var canvas = document.createElement("canvas");//创建画布
    document.getElementById('canvas-output').appendChild(canvas);//添加到html中
    $('#canvas-output').literallycanvas({imageURLPrefix: '../libs/literally/img'});//创建一个可以画画的画布

	function createMesh(geom) {
			//将画布直接传入材质的构造函数即可
            var canvasMap = new THREE.Texture(canvas);
            var mat = new THREE.MeshPhongMaterial();
            mat.map = canvasMap;
            var mesh = new THREE.Mesh(geom, mat);

            return mesh;
        }

使用视频作为纹理

和画布同理

		//创建视频纹理并进行一些初始化
		var video = document.getElementById('video');
        texture = new THREE.Texture(video);
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        texture.format = THREE.RGBFormat;
        texture.generateMipmaps = false;
		//要对纹理进行更新
		function render() {
            stats.update();


            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                if (texture) texture.needsUpdate = true;
            }

            if (controls.rotate) {
                cube.rotation.x += -0.01;
                cube.rotation.y += -0.01;
                cube.rotation.z += -0.01;
            }


            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }