three.js后期处理-使用VignetteShader定制效果添加晕映效果，在图片周围显示黑色边框(vue中使用three.js89)

最新推荐文章于 2025-03-24 22:09:01 发布

点燃火柴

最新推荐文章于 2025-03-24 22:09:01 发布

阅读量1.2k

点赞数

分类专栏： vue-three.js 文章标签： three.js vue中使用three.js VignetteShader 添加晕映效果三维web

本文链接：https://blog.csdn.net/qw8704149/article/details/118060123

版权

vue-three.js 专栏收录该内容

92 篇文章

订阅专栏

本文详细介绍如何在three.js中使用VignetteShader实现晕映效果，包括ShaderPass的创建、属性调整及在demo中的应用。跟随步骤学习如何为场景添加梦幻的晕影效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用VignetteShader定制效果添加晕映效果

1.demo效果
2. 知识要点
- 2.1 VignetteShader介绍
- 2.2 VignetteShader的使用步骤
3. 实现要点
4. demo代码

1.demo效果

在这里插入图片描述

如上图，为使用VignetteShader后期通道调整offset和darknesssh属性时的效果

2. 知识要点

2.1 VignetteShader介绍

通过使用VignetteShader的后期处理可以实现添加晕映效果，它支持输入两个参数darknesssh和offset分别表示晕映灰暗度和晕映偏移

2.2 VignetteShader的使用步骤

VignetteShader的使用步骤和其他ShaderPass定制效果处理通道几乎一样，具体如下

创建效果组合器
添加renderPass后期处理通道
添加VignetteShader后期处理通道
使用three.js提供的 VignetteShader 创建ShaderPass后期处理通道，添加到效果组合器中
添加CopyShader后期处理通道
使用three.js提供的 CopyShader 创建ShaderPass的通道，添加到效果组合器中，该通道是为了将所有场景最终的结果复制到屏幕上
render函数中更新darknesssh和offset属性

3. 实现要点

3.1 相关文件引入

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
import { VignetteShader } from 'three/examples/jsm/shaders/VignetteShader.js'

3.2 创建效果组合器

首先创建效果组合器，然后创建renderPass、effectCopy、VignetteShader 处理通道并添加到效果组合器

createComposer() {
  //使用场景和相机创建RenderPass通道
  const renderPass = new RenderPass(this.scene, this.camera)

  //创建CopyShader后期处理ShaderPass通道
  const effectCopy = new ShaderPass(CopyShader)
  effectCopy.renderToScreen = true

  //创建VignetteShader后期处理ShaderPass通道
  this.vignette = new ShaderPass(VignetteShader)
  this.vignette.enabled = false

  //创建效果组合器
  this.composer = new EffectComposer(this.renderer)

  //将创建的通道添加到EffectComposer(效果组合器)对象中
  this.composer.addPass(renderPass)
  this.composer.addPass(effectCopy)
  this.composer.addPass(this.vignette)
}

3.3 render中更新

在render函数中更新定制通道属性和效果组合器

//更新是否开启VignetteShader和属性
this.vignette.enabled = this.properties.isVignetteShader
this.vignette.uniforms.darkness.value = this.properties.darkness.value
this.vignette.uniforms.offset.value = this.properties.offset.value

this.renderer.render(this.scene, this.camera)
/********** 更新效果组合器一定要在渲染器更新后，否则通道无法产生效果************/
this.composer.render(delta) //效果组合器更新

4. demo代码

<template>
  <div>
    <div id="container" />
    <div class="controls-box">
      <section>
        <el-row>
          <el-checkbox v-model="properties.isVignetteShader">
            是否开启晕映效果
          </el-checkbox>
        </el-row>
        <el-row>
          <div v-for="(item,key) in properties" :key="key">
            <div v-if="item&&item.name!=undefined">
              <el-col :span="8">
                <span class="vertice-span">{{ item.name }}</span>
              </el-col>
              <el-col :span="13">
                <el-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step" :format-tooltip="formatTooltip" />
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{ item.value }}</span>
              </el-col>
            </div>
          </div>
        </el-row>
      </section>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
import { VignetteShader } from 'three/examples/jsm/shaders/VignetteShader.js'

export default {
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      orbitControls: null,
      clock: null,
      composer: null,
      vignette: null,
      properties: {
        isVignetteShader: false,
        darkness: {
          name: 'darkness',
          value: 1,
          min: 0,
          max: 2,
          step: 0.1
        },
        offset: {
          name: 'offset',
          value: 1,
          min: 0,
          max: 4,
          step: 0.1
        }
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    formatTooltip(val) {
      return val
    },
    // 初始化
    init() {
      this.createScene() // 创建场景
      this.createModels() // 创建模型
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.createComposer()
      this.render() // 渲染
    },
    // 创建场景
    createScene() {
      this.scene = new THREE.Scene()
      const publicPath = process.env.BASE_URL
      this.scene.background = new THREE.TextureLoader().load(
        `${publicPath}textures/starry-deep-outer-space-galaxy.jpg`
      )
    },

    // 创建模型
    createModels() {
      this.createEarth()
      this.createMars()
    },
    createEarth() {
      const publicPath = process.env.BASE_URL
      const planetTexture = new THREE.TextureLoader().load(
        `${publicPath}textures/planets/Earth.png`
      )
      const specularTexture = new THREE.TextureLoader().load(
        `${publicPath}textures/planets/EarthSpec.png`
      )
      const normalTexture = new THREE.TextureLoader().load(
        `${publicPath}textures/planets/EarthNormal.png`
      )

      const planetMaterial = new THREE.MeshPhongMaterial()
      planetMaterial.specularMap = specularTexture
      planetMaterial.specular = new THREE.Color(0x4444aa)
      // planetMaterial.shininess = 2

      planetMaterial.normalMap = normalTexture
      planetMaterial.map = planetTexture
      // planetMaterial.shininess = 150
      const sphereGeom = new THREE.SphereGeometry(8, 40, 40)
      const earchMesh = new THREE.Mesh(sphereGeom, planetMaterial)
      earchMesh.position.x = -15
      earchMesh.position.y = 5

      this.scene.add(earchMesh)
    },
    createMars() {
      const publicPath = process.env.BASE_URL
      const planetTexture = new THREE.TextureLoader().load(
        `${publicPath}textures/planets/Mars_2k-050104.png`
      )
      const normalTexture = new THREE.TextureLoader().load(
        `${publicPath}textures/planets/Mars-normalmap_2k.png`
      )

      const planetMaterial = new THREE.MeshPhongMaterial()
      planetMaterial.normalMap = normalTexture
      planetMaterial.map = planetTexture

      const sphereGeom = new THREE.SphereGeometry(4, 40, 40)
      const marsMesh = new THREE.Mesh(sphereGeom, planetMaterial)
      marsMesh.position.x = 20

      this.scene.add(marsMesh)
    },

    // 创建光源
    createLight() {
      // 环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.3) // 创建环境光
      this.scene.add(ambientLight) // 将环境光添加到场景

      const directionLight = new THREE.DirectionalLight(0xffffff)
      directionLight.position.set(550, 100, 550)
      directionLight.intensity = 0.8
      this.scene.add(directionLight)
    },
    // 创建相机
    createCamera() {
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)
      this.camera.position.set(30, 30, 30) // 设置相机位置

      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
    },
    // 创建渲染器
    createRender() {
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.shadowMap.enabled = true // 显示阴影
      this.renderer.setClearColor(0x000000, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },

    createComposer() {
      //使用场景和相机创建RenderPass通道
      const renderPass = new RenderPass(this.scene, this.camera)

      //创建CopyShader后期处理ShaderPass通道
      const effectCopy = new ShaderPass(CopyShader)
      effectCopy.renderToScreen = true

      //创建VignetteShader后期处理ShaderPass通道
      this.vignette = new ShaderPass(VignetteShader)
      this.vignette.enabled = false

      //创建效果组合器
      this.composer = new EffectComposer(this.renderer)

      //将创建的通道添加到EffectComposer(效果组合器)对象中
      this.composer.addPass(renderPass)
      this.composer.addPass(effectCopy)
      this.composer.addPass(this.vignette)
    },

    render() {
      const delta = this.clock.getDelta() // 获取自上次调用的时间差
      this.orbitControls.update(delta) // 相机控制更新

      //更新是否开启VignetteShader和属性
      this.vignette.enabled = this.properties.isVignetteShader
      this.vignette.uniforms.darkness.value = this.properties.darkness.value
      this.vignette.uniforms.offset.value = this.properties.offset.value

      this.renderer.render(this.scene, this.camera)
      /********** 更新效果组合器一定要在渲染器更新后，否则通道无法产生效果************/
      this.composer.render(delta) //效果组合器更新

      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls() {
      this.clock = new THREE.Clock() // 创建THREE.Clock对象，用于计算上次调用经过的时间
      this.orbitControls = new OrbitControls(
        this.camera,
        this.renderer.domElement
      )
    }
  }
}
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.controls-box {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 400px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
}
</style>