RenderPass
是最基础的一个pass。
EffectComposer合成器
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { DirectionalLight, HemisphereLight, SphereBufferGeometry } from "three";
import{EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer"
import{RenderPass} from "three/examples/jsm/postprocessing/RenderPass"
var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色
window.addEventListener("resize", () => {//窗口大小变化事件
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
//设置了aspect 必须更新相机的投影矩阵
camera.updateProjectionMatrix();
//合成器的绘制区域需要设置高宽
effectComposer.setSize(window.innerWidth,window.innerHeight);
})
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();
var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);
var sphereGeometry = new SphereBufferGeometry(5, 12, 12);
var material = new THREE.MeshPhongMaterial();
var sphereMesh = new THREE.Mesh(sphereGeometry, material)
scene.add(sphereMesh);
/**
* 后处理 postProcessing
* 把场景渲染出来得到一张图,每次调用webglRenderer.render就重新绘制
* 后处理相当于把这张图进行处理,就是对这张图片进行添加效果的处理
* 后处理如何实现:怎么实现,使用系统提供的特效合成器
* 一个pass就是一个渲染通道,就是进行一个特效的方法,可以添加无数的通道
* renderPass是一个最基础的pass
* OutlinePass(resolution: THREE.Vector2, scene: THREE.Scene, camera: THREE.Camera, selectedObjects?: THREE.Object3D<THREE.Event>[]): OutlinePass
*/
//1.合成器 2.renderpass必须在第一个 3.其他pass
var effectComposer=new EffectComposer(renderer);
var renderPass=new RenderPass(scene,camera);
effectComposer.addPass(renderPass);
update()
function update() {
console.log('刷新')
// renderer.render(scene, camera);
//使用后处理,就使用特效合成器EffectComposer来渲染
effectComposer.render();
requestAnimationFrame(update);//不会卡塞,专门针对图形渲染刷新的方法
}
DotScreenPass
import{DotScreenPass} from "three/examples/jsm/postprocessing/DotScreenPass"
var effectComposer=new EffectComposer(renderer);
var renderPass=new RenderPass(scene,camera);
effectComposer.addPass(renderPass);
var dotPass=new DotScreenPass();
effectComposer.addPass(dotPass);
OutlinePass
import{OutlinePass} from "three/examples/jsm/postprocessing/OutlinePass"
var outlinePass=new OutlinePass(new THREE.Vector2(window.innerWidth,window.innerHeight),scene,camera);
effectComposer.addPass(outlinePass);
鼠标悬浮球体outline,离开球体取消outline
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { DirectionalLight, DoubleSide, HemisphereLight, SphereBufferGeometry} from "three";
import{EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer"
import{OutlinePass} from "three/examples/jsm/postprocessing/OutlinePass"
import{RenderPass} from "three/examples/jsm/postprocessing/RenderPass"
var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor('rgba(135,206,250,0.5)',1.0);
var mouse = new THREE.Vector2();
var selectedObjects = [];
var raycaster = new THREE.Raycaster();
window.addEventListener("resize", () => {//窗口大小变化事件
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
//设置了aspect 必须更新相机的投影矩阵
camera.updateProjectionMatrix();
//合成器的绘制区域需要设置高宽
effectComposer.setSize(window.innerWidth,window.innerHeight);
})
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();
var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);
var sphereGeometry = new SphereBufferGeometry(5, 12, 12);
var material = new THREE.MeshPhongMaterial({color:0xff0000,side:DoubleSide});
var sphereMesh = new THREE.Mesh(sphereGeometry, material)
scene.add(sphereMesh);
//-------------------------------------------------------------------------------
//添加两个事件
window.addEventListener( 'mousemove', onTouchMove );
window.addEventListener( 'touchmove', onTouchMove );
function onTouchMove( event ) {
var x, y;
if ( event.changedTouches ) {
x = event.changedTouches[ 0 ].pageX;
y = event.changedTouches[ 0 ].pageY;
} else {
x = event.clientX;
y = event.clientY;
}
mouse.x = ( x / window.innerWidth ) * 2 - 1;
mouse.y = - ( y / window.innerHeight ) * 2 + 1;
checkIntersection();
}
function checkIntersection() {
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( [ scene ], true );
if ( intersects.length > 0 ) {
var selectedObject = intersects[ 0 ].object;
addSelectedObject( selectedObject );
outlinePass.selectedObjects = selectedObjects;
} else {
outlinePass.selectedObjects = [];
}
}
function addSelectedObject( object ) {
selectedObjects = [];
selectedObjects.push( object );
}
var effectComposer=new EffectComposer(renderer);
var renderPass=new RenderPass(scene,camera);
effectComposer.addPass(renderPass);
var outlinePass=new OutlinePass(new THREE.Vector2(window.innerWidth,window.innerHeight),scene,camera);
effectComposer.addPass(outlinePass);
HalftonePass
var halftonePass=new HalftonePass(window.innerWidth,window.innerHeight,{});
effectComposer.addPass(halftonePass);
GlitchPass
故障pass
import{GlitchPass} from "three/examples/jsm/postprocessing/GlitchPass"
var glitchPass=new GlitchPass();
effectComposer.addPass(glitchPass);
glitchPass.renderToScreen=true;