赞
踩
方案一直通车点击直达
方案三直通车点击直达
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script type="x-shader/x-vertex" id="vertexshader"> varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } </script> <script type="x-shader/x-fragment" id="fragmentshader"> uniform sampler2D baseTexture; uniform sampler2D bloomTexture; varying vec2 vUv; void main() { gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) ); } </script> <script type="module"> import * as THREE from "./build/three.module.js"; import { GUI } from './jsm/libs/dat.gui.module.js'; import { OrbitControls } from "./jsm/controls/OrbitControls.js"; // 轨道控制 import { EffectComposer } from "./jsm/postprocessing/EffectComposer.js"; // 效果合成器--EffectComposer依赖RenderPass.js、ShaderPass.js、CopyShader.js库 import { UnrealBloomPass } from "./jsm/postprocessing/UnrealBloomPass.js"; // 虚幻效果通道 import { RenderPass } from "./jsm/postprocessing/RenderPass.js"; // 渲染通道 import { ShaderPass } from "./jsm/postprocessing/ShaderPass.js"; // 着色器通道 import { FXAAShader } from "./jsm/shaders/FXAAShader.js"; // 抗锯齿着色器 let scene, camera, renderer, bloomComposer, finalComposer; const ENTIRE_SCENE = 0,// 全部的，整个的场景 BLOOM_SCENE = 1; // 光晕场景 const bloomLayer = new THREE.Layers();// 光晕层次-创建一个图层对象 bloomLayer.set(BLOOM_SCENE);// 先把光晕层次设置光晕场景的层次1 const darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });// 跟辉光光晕有关的变量 const materials = {};// 跟辉光光晕有关的变量 const params = { exposure: 0,// 暴露 bloomStrength: 1.5,// 光晕强度 bloomThreshold: 0,// 光晕阈值 bloomRadius: 0,// 光晕半径 }; const init = () => { // 场景 scene = new THREE.Scene(); // 相机 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 ); camera.position.set(50, 50, 50); camera.position.y = 50; // 渲染器 renderer = new THREE.WebGLRenderer({ antialias: true, // 抗锯齿 }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.toneMapping = THREE.ReinhardToneMapping; document.body.appendChild(renderer.domElement); // 环境光 const light = new THREE.AmbientLight(0xffffff, 0.6); light.layers.enable(0); light.layers.enable(1); scene.add(light); // 控制器 const controls = new OrbitControls(camera, renderer.domElement); scene.add(new THREE.AxesHelper(100)); window.onresize = () => { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); }; }; let bloomPass const initComposer = () => { // 去掉锯齿---1 // 通过ShaderPass构造函数把FXAAShader着色器和uniforms构成的对象作为参数，创建一个锯齿通道FXAAShaderPass,然后把锯齿通道插入到composer中。 const effectFXAA = new ShaderPass(FXAAShader); effectFXAA.uniforms["resolution"].value.set( 0.6 / window.innerWidth, 0.6 / window.innerHeight ); // 渲染区域Canvas画布宽高度 不一定是全屏，也可以是区域值 effectFXAA.renderToScreen = true; // 去掉锯齿---1 const renderScene = new RenderPass(scene, camera);// RenderPass这个通道会在当前场景（scene）和摄像机（camera）的基础上渲染出一个新场景，新建： // 添加光晕效果---2 bloomPass = new UnrealBloomPass( // UnrealBloomPass通道可实现一个泛光效果。 new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85 ); bloomPass.threshold = params.bloomThreshold; bloomPass.strength = params.bloomStrength; bloomPass.radius = params.bloomRadius; // 添加光晕效果---2 // 着色器通道容器--放进容器里 bloomComposer = new EffectComposer(renderer); // EffectComposer可以理解为着色器通道容器，着色器通道按照先后顺序添加进来并执行 bloomComposer.renderToScreen = false; bloomComposer.addPass(renderScene); bloomComposer.addPass(bloomPass); // 添加光晕效果 bloomComposer.addPass(effectFXAA);// 去掉锯齿 // 着色器通道容器--放进容器里 const finalPass = new ShaderPass( new THREE.ShaderMaterial({ uniforms: { baseTexture: { value: null }, bloomTexture: { value: bloomComposer.renderTarget2.texture }, }, vertexShader: document.getElementById("vertexshader").textContent, fragmentShader: document.getElementById("fragmentshader") .textContent, defines: {}, }), "baseTexture" ); finalPass.needsSwap = true; finalComposer = new EffectComposer(renderer); finalComposer.addPass(renderScene); finalComposer.addPass(finalPass); finalComposer.addPass(effectFXAA); }; const render1 = () => { scene.traverse((obj) => { if (obj.isMesh && bloomLayer.test(obj.layers) === false) { materials[obj.uuid] = obj.material; obj.material = darkMaterial; } }); bloomComposer.render(); scene.traverse((obj) => { if (materials[obj.uuid]) { obj.material = materials[obj.uuid]; delete materials[obj.uuid]; } }); finalComposer.render(); requestAnimationFrame(render); }; const render = () => { scene.traverse(darkenNonBloomed); // 隐藏不需要辉光的物体 bloomComposer.render(); scene.traverse(restoreMaterial); // 还原 finalComposer.render(); requestAnimationFrame(render); }; const bloomIgnore = [];// 跟辉光光晕有关的变量 function darkenNonBloomed(obj) { if (obj instanceof THREE.Scene) { // 此处忽略Scene，否则场景背景会被影响 materials.scene = obj.background; obj.background = null; return; } if ( obj instanceof THREE.Sprite || // 此处忽略Sprite bloomIgnore.includes(obj.type) || (obj.isMesh && bloomLayer.test(obj.layers) === false) // 判断与辉光是否同层 ) { materials[obj.uuid] = obj.material; obj.material = darkMaterial; } } function restoreMaterial(obj) { if (obj instanceof THREE.Scene) { obj.background = materials.scene; delete materials.scene; return; } if (materials[obj.uuid]) { obj.material = materials[obj.uuid]; delete materials[obj.uuid]; } } const main = () => { init(); initComposer(); addCubes() addCubes1() changeBloom() }; function addCubes1() { const geometry = new THREE.BoxGeometry(20, 20, 10); // 正常方块 const normalMtl = new THREE.MeshLambertMaterial({ color: 0x35c5ea }); const normalBox = new THREE.Mesh(geometry, normalMtl); normalBox.position.z = -5; // normalBox.layers.set(0); // 这行代码其实没有卵用，如果没有创建layer他会自动创建 设置图层为0，网格模型1默认图层是0，对应掩码是1 console.log('查看网格模型默认图层掩码值normalBox', normalBox.layers.mask); scene.add(normalBox); // 通过Three.js渲染器渲染场景的时候，场景中的模型对象图层必须和相机对象的图层一样，模型对象才会被渲染出来，一般默认情况下，网格Mesh等模型对象和相机对象Camera默认的图层都是0，具体点说就是它们的图层属性.layers值Layers对象表示的图层都是0，0层对应的.mask属性值是1. // 发光方块 const bloomMtl = new THREE.MeshLambertMaterial({ color: 0x9d94ea }); const bloomBox = new THREE.Mesh(geometry, bloomMtl); bloomBox.position.z = 5; bloomBox.layers.enable(1); console.log('查看网格模型默认图层掩码值bloomBox', normalBox.layers.mask); scene.add(bloomBox); } function addCubes() { // 创建两个box， 将box进行layers进行分层是重要代码，camera默认渲染0层 let texture = new THREE.TextureLoader().load("./backav9.jpg") let texture1 = new THREE.TextureLoader().load("./py.png") var geometry1 = new THREE.BoxGeometry(20, 20, 20); var material1 = new THREE.MeshBasicMaterial({ map: texture }); var cube1 = new THREE.Mesh(geometry1, material1); // 重要代码，将当前创建的box分配到0层 cube1.layers.set(0)// 这行代码其实没有卵用，如果没有创建layer他会自动创建 设置图层为0，网格模型1默认图层是0，对应掩码是1 console.log('查看网格模型默认图层掩码值cube1', cube1.layers.mask); cube1.position.set(60, 0, 0) scene.add(cube1); // 通过Three.js渲染器渲染场景的时候，场景中的模型对象图层必须和相机对象的图层一样，模型对象才会被渲染出来，一般默认情况下，网格Mesh等模型对象和相机对象Camera默认的图层都是0，具体点说就是它们的图层属性.layers值Layers对象表示的图层都是0，0层对应的.mask属性值是1. // 发光方块 var geometry2 = new THREE.BoxGeometry(20, 20, 20); var material2 = new THREE.MeshBasicMaterial({ map: texture1 }); var cube2 = new THREE.Mesh(geometry2, material2); cube2.position.set(30, 0, 0) cube2.layers.enable(1); console.log('查看网格模型默认图层掩码值cube2', cube2.layers.mask); scene.add(cube2); } main(); render(); function changeBloom() { const gui = new GUI(); gui.add(params, 'exposure', 0.1, 2).onChange(function (value) { renderer.toneMappingExposure = Math.pow(value, 4.0); }); gui.add(params, 'bloomThreshold', 0.0, 1.0).onChange(function (value) { bloomPass.threshold = Number(value); }); gui.add(params, 'bloomStrength', 0.0, 3.0).onChange(function (value) { bloomPass.strength = Number(value); }); gui.add(params, 'bloomRadius', 0.0, 1.0).step(0.01).onChange(function (value) { bloomPass.radius = Number(value); }); } // Layers 对象为 Object3D 分配 1个到 32 个图层。32个图层从 0 到 31 编号标记。 在内部实现上，每个图层对象被存储为一个 bit mask， 默认的，所有 Object3D 对象都存储在第 0 个图层上。 // 图层对象可以用于控制对象的显示。当 camera 的内容被渲染时与其共享图层相同的物体会被显示。每个对象都需要与一个 camera 共享图层。 // 每个继承自 Object3D 的对象都有一个 Object3D.layers 对象。 // 构造函数 // Layers() // 创建一个新的图层对象，该对象默认与第 0 图层关联。 // 属性 // ###.mask : Integer // 用 bit mask 表示当前图层对象与 0 - 31 中的哪些图层相对应。所属层所对应的比特位为 1，其他位位 0。 // 方法 // .disable ( layer : Integer ) : null // layer - 一个 0 - 31 的整数。 // 删除图层对象与参数指定图层的对应关系。 // .enable ( layer : Integer ) : null // layer - 一个 0 - 31 的整数。 // 增加图层对象与参数指定图层的对应关系。 // .set ( layer : Integer ) : null // layer - 一个 0 - 31 的整数。 // 删除图层对象已有的所有对应关系，增加与参数指定的图层的对应关系。 // .test ( layers : Layers ) : Boolean // layers - 一个图层对象。 // 如果传入图层对象与当前对象属于相同的一组图层，则返回 true，否则返回 false。 // .toggle ( layer : Integer ) : null // layer - 一个 0 - 31 的整数。 // 根据参数切换对象所属图层。 </script> </body> </html>