Threejs使用CubeCamera实现环境映射

CubeCamera是一个特殊的相机，与透视和正交的作用都不同，它更像是给模型添加相机，将周围的场景通过CubeCamera相机获取到，然后作为物体的贴图，并实时随着场景的变化而变化。先看一个官网的例子效果：

然后我们用自己的代码实现，首先需要创建一个场景，包括场景，灯光，相机，渲染器，等，注意这里要添加相机的，因为CubeCamera并不是作为传统相机使用的，所以传统相机还是需要添加的，

首先需要创建一个WebGLCubeRenderTarget渲染器，并将渲染器作为CubeCamera的参数添加到CubeCamera中，WebGLCubeRenderTarget可以理解为将周围的场景获取到做成贴图的功能，

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, { generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );
this.cubeCamera = new THREE.CubeCamera( 1, 100000, cubeRenderTarget );
this.scene.add( this.cubeCamera );

然后就可以创建物体了，官网例子是一个球体，这里我也用球体，创建球体后，将刚才的WebGLCubeRenderTarget中的贴图属性作为球体的材质贴图，然后将球体添加到场景中，

      const sphere = new THREE.SphereGeometry(1, 32, 32);
      const chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeRenderTarget.texture } );
      this.car = new THREE.Mesh( sphere, chromeMaterial );
      this.scene.add( this.car );

这里只是实现将场景贴到物体上，但是如果场景更新需要实时更新，因此还需要做实时渲染功能：

initAnimate() {
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(this.scene, this.camera);
      if(this.cubeCamera){// 更新 CubeCamera
        this.cubeCamera.position.copy( this.car.position );
        this.cubeCamera.update( this.renderer, this.scene );
      }
    },

最终看下效果图