three.js使用CubeCamera创建反光效果，动态环境贴图实现，立方体全景贴图(vue中使用three.js83)-优快云博客

该博客详细介绍了如何使用Three.js库创建动态反光效果。通过创建CubeCamera，设置动态环境贴图材质，更新立方体相机并在渲染过程中应用，可以实现场景中模型的反光。此外，还展示了如何创建全景贴图作为场景背景，以及创建和配置立方体渲染器目标对象、模型和光源。文章提供了完整的代码示例，包括Vue组件模板，演示了如何将这些技术应用于实际项目。

使用CubeCamera创建反光效果

1.demo效果
2. 实现要点
3. demo代码

1.demo效果

在这里插入图片描述

2. 实现要点

2.1 创建立方体相机CubeCamera

创建立方体的语法如下

const cubeCamera = new THREE.CubeCamera( near, far, cubeRenderTarget)

参数说明

near – 远剪切面的距离
far – 近剪切面的距离
cubeRenderTarget – 立方体渲染器目标对象
如上参数可知创建CubeCamera对象需要三个参数，其中第三个参数是一个WebGLCubeRenderTarget 类型的对象，所以需要首先创建这样一个对象，然后创建立方体对象，具体代码如下：

//创建立方体渲染器目标对象
this.cubeRenderTarget = new THREE.WebGLCubeRenderTarget(128, {
   
   
  format: THREE.RGBFormat,
  generateMipmaps: true,
  minFilter: THREE.LinearMipmapLinearFilter
})

//创建立方体相机
this.cubeCamera = new THREE.CubeCamera(1, 100000, this.cubeRenderTarget)
this.scene.add(this.cubeCamera)

2.2 使用动态环境贴图材质

上一步中我们创建完立方体相机后，立方体渲染器目标对象上边生成了有相机获取的图形生成的纹理，并保存在cubeRenderTarget.texture之中，接下来把它当环境贴图创建材质，随后使用这个材质创建一个球体Mesh

//创建球体
this.renderer.renderTarget
const dynamicEnvMapMaterial = new THREE.MeshPhongMaterial({
   
   
  envMap: this.cubeRenderTarget.texture
})
const sphereGeometry = new THREE.SphereGeometry(10, 15, 15)
this.sphere = new THREE.Mesh(sphereGeometry, dynamicEnvMapMaterial)
this.scene.add(this.sphere)

2.3 render中更新立方体相机

this.cubeCamera.update(this.renderer, this.scene) //立方体相机更新

通过以上三步就可以实现将场景中除球体以外的所有模型作为环境贴图添加到球体上，支持动态变化，除此之外还有几点需要说明一下，具体详见以下步骤

2.4 创建场景的全景贴图

这一步与上一篇文章一样，代码如下

// 创建场景
createScene() {
   
   
  this.scene = new THREE.Scene()
  const publicPath = process.env.BASE_URL
  //创建全景贴图设置为场景背景
  this.scene.background = new THREE.CubeTextureLoader()
    .setPath(`${
     
     publicPath}textures/cubemap/parliament/`)
    .load([
      'posx.jpg',
      'negx.jpg',
      'posy.jpg',
      'negy.jpg',
      'posz.jpg',
      'negz.jpg'
    ])
}

2.5 创建场景中的模型

模型包括一个立方体和一个球体，要注意一下几点

创建静态环境贴图材质
这里就是使用场景的背景创建环境贴图材质，只需要将场景的背景赋值给材质的envMap即可
创建方块和圆环
这里使用BoxGeometry创建一个立方体模型，使用TorusGeometry创建一个圆环，它们使用的材质都是刚刚创建的环境贴图材质
创建动态环境贴图的球体
这里文章中 2.2 已有说明，请直接看代码

// 创建模型
createModels() {
   
   
  const material = new THREE.MeshPhongMaterial()
  material.envMap = this.scene.background //场景背景设置为材质的环境贴图

  //创建方块
  const boxGeometry = new THREE.BoxGeometry(15, 15, 15)
  this.cube = new THREE.Mesh(boxGeometry, material)

  this.cube.position.set(-22, 0, 0)
  this.scene.add(this.cube)

  //构建圆环
  const torusGeometry = new THREE.TorusGeometry(8, 3, 16, 100)
  this.torus = new THREE.Mesh(torusGeometry, material)
  this.torus.position.set(22, 0, 0)
  this.scene.add(this.torus)

  //创建球体
  this.renderer.renderTarget
  const dynamicEnvMapMat