three.js用THREE.CubeCamera和环境贴图创建反光效果

在文章：three.js贴图之CubeTextureLoader全景贴图中已经讲过全景贴图的应用，本文将进一步扩展全景贴图的功能，结合THREE.CubeCamera功能，创建出一个具有反光效果的场景，首先来看看看看THREE.CubeCamera的用法：

let cubeCamera = new THREE.CubeCamera(0.1, 10000, 128);//实例化一个cubeCamera
scene.add(cubeCamera);//将其添加到场景中
let dynamicEnvMaterial = new THREE.MeshBasicMaterial({
    envMap: cubeCamera.renderTarget, side: THREE.DoubleSide
}); //新建一个动态环境材料，envMap为环境贴图，设置为cubeCamera的渲染目标
cubeCamera.updateCubeMap(renderer, scene);//更新渲染立方体贴图

THREE.CubeCamera(near, far, cubeResolution)总共接收三个参数，前两个参数表示最近距离和最远距离，和THREE.PerspectiveCamera中的near和far一个道理，最后一个参数按字面理解为立方体分辨率，通俗的理解为物体对场景反光的清晰度，即越大越清晰，可以取128、256、512、1080等；本文实现一个球将周围场景反光，类似于镜子，你可以在球的表面上看到周围场景的镜像。demo实现效果如下图：

demo代码如下：