后期处理"/>
three.js后期处理
使用SepiaShader定制效果创建出类似乌贼墨的效果
- 1.demo效果
- 2. 知识要点
- 2.1 SepiaShader介绍
- 2.2 SepiaShader的使用步骤
- 3. 实现要点
- 3.1 相关文件引入
- 3.2 创建效果组合器
- 3.3 render中更新
- 4. demo代码
1.demo效果
如上图，为使用SepiaShader后期通道调整amount属性时的效果
2. 知识要点
2.1 SepiaShader介绍
通过使用SepiaShader的后期处理可以实现类似乌贼墨的效果，它支持输入一个参数amount表示乌贼墨效果浓度
2.2 SepiaShader的使用步骤
SepiaShader的使用步骤和其他ShaderPass定制效果处理通道几乎一样，具体如下
- 创建效果组合器
- 添加renderPass后期处理通道
- 添加SepiaShader后期处理通道
使用three.js提供的 SepiaShader 创建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 { SepiaShader } from 'three/examples/jsm/shaders/SepiaShader.js'
3.2 创建效果组合器
首先创建效果组合器，然后创建renderPass、effectCopy、SepiaShader 处理通道并添加到效果组合器
createComposer() {//使用场景和相机创建RenderPass通道const renderPass = new RenderPass(this.scene, this.camera)//创建CopyShader后期处理ShaderPass通道const effectCopy = new ShaderPass(CopyShader)effectCopy.renderToScreen = true//创建SepiaShader后期处理ShaderPass通道this.sepia = new ShaderPass(SepiaShader)this.sepia.enabled = false//创建效果组合器thisposer = new EffectComposer(this.renderer)//将创建的通道添加到EffectComposer(效果组合器)对象中thisposer.addPass(renderPass)thisposer.addPass(effectCopy)thisposer.addPass(this.sepia)
}
3.3 render中更新
在render函数中更新定制通道属性和效果组合器
//更新是否开启SepiaShader和属性
this.sepia.enabled = this.properties.isSepiaShader
this.sepia.uniforms.amount.value = this.properties.amount.valuethis.renderer.render(this.scene, this.camera)
/********** 更新效果组合器一定要在渲染器更新后，否则通道无法产生效果************/
thisposer.render(delta) //效果组合器更新
4. demo代码
<template><div><div id="container" /><div class="controls-box"><section><el-row><el-checkbox v-model="properties.isSepiaShader">是否开启晕映效果</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 { SepiaShader } from 'three/examples/jsm/shaders/SepiaShader.js'export default {data() {return {camera: null,scene: null,renderer: null,orbitControls: null,clock: null,composer: null,sepia: null,properties: {isSepiaShader: false,amount: {name: 'amount',value: 1,min: 0,max: 2,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//创建SepiaShader后期处理ShaderPass通道this.sepia = new ShaderPass(SepiaShader)this.sepia.enabled = false//创建效果组合器thisposer = new EffectComposer(this.renderer)//将创建的通道添加到EffectComposer(效果组合器)对象中thisposer.addPass(renderPass)thisposer.addPass(effectCopy)thisposer.addPass(this.sepia)},render() {const delta = this.clock.getDelta() // 获取自上次调用的时间差this.orbitControls.update(delta) // 相机控制更新//更新是否开启SepiaShader和属性this.sepia.enabled = this.properties.isSepiaShaderthis.sepia.uniforms.amount.value = this.properties.amount.valuethis.renderer.render(this.scene, this.camera)/********** 更新效果组合器一定要在渲染器更新后，否则通道无法产生效果************/thisposer.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>更多推荐
three.js后期处理
发布评论