three.js中给场景中的对象添加贴图

给场景中的对象添加贴图.png

1、three.js中的贴图类型：

• normalMap：法线贴图
• bumpMap：凹凸贴图
• envMap：环境贴图
• specularMap：高光贴图
• lightMap：光照贴图

2、贴图原理：

通过纹理贴图加载器TextureLoader()去新创建一个贴图对象出来，然后再去调用里面的load()方法去加载一张图片，这样就会返回一个纹理对象，纹理对象可以作为模型材质颜色贴图map属性的值，材质的颜色贴图属性map设置后，模型会从纹理贴图上采集像素值。

3、凹凸贴图和法线贴图

一般用于复杂的曲面模型，比如3D地球模型的绘制，这样的模型往往顶点数量比较多，模型的文件也非常庞大，为了降低模型文件大小，法线贴图算法完美的契合，把复杂的几何信息映射到法线贴图上去。

4、待解决的bug：

• 1、草地使用纹理贴图后，单点光源出现了失效问题
• 2、实验过程中使用本地img时，出现图片跨域问题

5、简单的纹理贴图示例源代码：

    // 定义场景、相机、渲染器、网格、地面、环境光、点光源 变量
        var scene, camera, renderer, mesh, meshfloor, ambientLight, pointLight;
        var meshTexture,meshNormalMap,meshBumpMap;
        var meshFloorTexture,meshFloorNormalMap,meshFloorBumpMap;
        //diffuse texture 漫反射贴图 normal texture 法线贴图  Bump Mapping 凹凸贴图
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);

        // 加载贴图
        var textureLoader = new THREE.TextureLoader();
        meshTexture = textureLoader.load("https://tse4-mm.cn.bing.net/th/id/OIP-C.xxLtCX-kf3F8wdlVHIiFPQHaHX?w=184&h=183&c=7&r=0&o=5&pid=1.7");
        meshNormalMap = textureLoader.load("https://tse4-mm.cn.bing.net/th/id/OIP-C.xxLtCX-kf3F8wdlVHIiFPQHaHX?w=184&h=183&c=7&r=0&o=5&pid=1.7");
        meshBumpMap = textureLoader.load("https://tse4-mm.cn.bing.net/th/id/OIP-C.xxLtCX-kf3F8wdlVHIiFPQHaHX?w=184&h=183&c=7&r=0&o=5&pid=1.7");
        // 新建一个箱子
        mesh = new THREE.Mesh(
            new THREE.BoxGeometry(5, 5, 5), //创建5*5*5的箱子的大小
            // 注意：箱子不能使用MeshBasicMaterial，否则会出现光照无反应
            new THREE.MeshPhongMaterial({
                color: 0x757575,
                map:meshTexture,
                normalMap:meshNormalMap,
                bumpMap:meshBumpMap
            })
        )
        // 箱子去接受光源
        mesh.receiveShadow = true;
        // 箱子去投射光源
        mesh.castShadow = true;
        mesh.position.y += 5/2; //设置箱子的位置坐标

        meshFloorTexture = textureLoader.load("https://tse4-mm.cn.bing.net/th/id/OIP-C.snLk0cTXFZIxIQ9GHfOmQQHaE7?w=291&h=194&c=7&r=0&o=5&pid=1.7");
        meshFloorNormalMap = textureLoader.load("https://tse4-mm.cn.bing.net/th/id/OIP-C.snLk0cTXFZIxIQ9GHfOmQQHaE7?w=291&h=194&c=7&r=0&o=5&pid=1.7");
        meshFloorBumpMap = textureLoader.load("https://tse4-mm.cn.bing.net/th/id/OIP-C.snLk0cTXFZIxIQ9GHfOmQQHaE7?w=291&h=194&c=7&r=0&o=5&pid=1.7");
        // 创建一个地面
        meshfloor = new THREE.Mesh(
            new THREE.PlaneGeometry(130, 130, 10, 10),
            new THREE.MeshPhongMaterial({
                color: 0x1B5E20,
                map:meshFloorTexture,
                normalMap:meshFloorNormalMap,
                bumpMap:meshFloorBumpMap
            })
        )
        meshfloor.rotation.x -= Math.PI / 2;
        // 地面同样设置去接受光源
        meshfloor.receiveShadow = true;

        // 将所有创建的物体加入到场景中去
        scene.add(mesh);
        scene.add(meshfloor);

        // 环境光
        ambientLight = new THREE.AmbientLight(0xffffff,1); //环境光的颜色以及强弱
        // 点光
        pointLight = new THREE.PointLight(0xffffff,1);
        pointLight.position.set(2, 20, -2);
        pointLight.castShadow = true;
        pointLight.shadow.camera.near = 0.1;
        pointLight.shadow.camera.far = 25;

        scene.add(ambientLight);
        scene.add(pointLight);

        camera.position.set(10, 10, 10);
        camera.up.set(0,1,0);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        // 给渲染器添加阴影效果
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.BasicShadowMap;
        document.body.appendChild(renderer.domElement);

        // 每一帧去循环调用render()函数
        animate();

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