Three.js - 使用环境贴图 创建虚假的反光效果

计算环境反光会非常耗费CPU，而且通常会使用光线追踪算法，在three.js中通过环境贴图envMap来伪装反光，并且可以将环境贴图用到指定的对象上。

1、示例

示例
https://ithanmang.gitee.io/threejs/home/201809/20180905/07-envMap-texture.html
效果

2、使用步骤

2.1、创建一个全景的贴图

scene = new THREE.Scene();
        scene.background = new THREE.CubeTextureLoader().setPath('../../textures/cube/Park2/')
            .load( [
                'posx.jpg',
                'negx.jpg',
                'posy.jpg',
                'negy.jpg',
                'posz.jpg',
                'negz.jpg'
            ] );

2.2、给场景中的对象的材质添加环境贴图

let material = new THREE.MeshPhongMaterial();
        material.envMap = scene.background;

        let sphereGeometry = new THREE.SphereGeometry(20, 60, 60);


        let boxGeometry = new THREE.BoxGeometry(30, 30, 30);
        let box = new THREE.Mesh(boxGeometry, material);

        let sphere = new THREE.Mesh(sphereGeometry, material);
        sphere.translateX(-45);
        box.translateX(45);

        let loader = new THREE.GLTFLoader();
        loader.load('../../models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', function (gltf) {
   

            gltf.scene.traverse(function (child) {
   

                if (child.isMesh) {
   
                    child.scale.set(25, 25, 25);
                    child.material.envMap = scene.background;
                }

            });

            scene.add(gltf.scene);
            scene.add(box);
            scene.add