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

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

• 1.demo效果
• 2. 知识要点
• • 2.1 VignetteShader介绍
  • 2.2 VignetteShader的使用步骤
• 3. 实现要点
• • 3.1 相关文件引入
  • 3.2 创建效果组合器
  • 3.3 render中更新
• 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.valuethis.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_URLthis.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_URLconst 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 = specularTextureplanetMaterial.specular = new THREE.Color(0x4444aa)// planetMaterial.shininess = 2planetMaterial.normalMap = normalTextureplanetMaterial.map = planetTexture// planetMaterial.shininess = 150const sphereGeom = new THREE.SphereGeometry(8, 40, 40)const earchMesh = new THREE.Mesh(sphereGeom, planetMaterial)earchMesh.position.x = -15earchMesh.position.y = 5this.scene.add(earchMesh)},createMars() {const publicPath = process.env.BASE_URLconst 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 = normalTextureplanetMaterial.map = planetTextureconst sphereGeom = new THREE.SphereGeometry(4, 40, 40)const marsMesh = new THREE.Mesh(sphereGeom, planetMaterial)marsMesh.position.x = 20this.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.8this.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.isVignetteShaderthis.vignette.uniforms.darkness.value = this.properties.darkness.valuethis.vignette.uniforms.offset.value = this.properties.offset.valuethis.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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！