先上图对比方案1-2-3不同点，本文是方案3

方案1(旋转场景情况下发光体不应该遮住另一个，但是遮住了)

方案2（层次正常，发光正常）

方案3（层次正常，发光正常，但是转动场景时候部分辉光会被遮挡，但是还算OK）

上代码,与方案1代码只有两行是不一样的哦

<!DOCTYPE html

  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>bloomPass</title>

  <style>

    html,

    body {

      width: 100%;

      height: 100%;

      margin: 0;

      padding: 0;

      overflow: hidden;

    }

    #container {

      width: 100%;

      height: 100%;

    }

  </style>

</head>

<body>

  <div id="container"></div>

  <button onclick="getC()" style="position: absolute; top: 50px;">getC</button>

  <!-- <script src="js/three.min.js"></script> -->

  <script src="js/tween.js"></script>

  <!-- <script src="js/stats.min.js"></script> -->

  <!-- <script src="js/OrbitControls.js"></script> -->

  <!-- 后期处理js -->

  <!--  -->

  <!-- <script src="js/shaders/ConvolutionShader.js"></script> -->

  <!-- <script> -->

  <script type="module">

    import * as THREE from '../build/three.module.js';

    import Stats from './jsm/libs/stats.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（效果组合器）对象

    import { RenderPass } from './jsm/postprocessing/RenderPass.js'; // RenderPass/该通道在指定的场景和相机的基础上渲染出一个新场景

    import { ShaderPass } from './jsm/postprocessing/ShaderPass.js'; // ShaderPass/使用该通道你可以传入一个自定义的着色器，用来生成高级的、自定义的后期处理通道

    import { CopyShader } from './jsm/shaders/CopyShader.js'; // 传入了CopyShader着色器，用于拷贝渲染结果

    import { BloomPass } from './jsm/postprocessing/BloomPass.js';

    import { UnrealBloomPass } from './jsm/postprocessing/UnrealBloomPass.js'; // BloomPass/形成泛光的效果

    // 需要用官方版本的tween.js

    let container = document.getElementById('container');

    let camera, scene, renderer;

    let cubeGroup, labelGroup = [];

    let stats, controls;

    let renderOrder = 1

		let bloomPass

    var params = {

			exposure: 1,

			bloomStrength: 1.5,

			bloomThreshold: 0,

			bloomRadius: 0

		};

    let bloomComposer = null

    init();

    update();

    function init() {

      // scene

      scene = new THREE.Scene();

      // camera

      let frustumSize = 150;

      let aspect = container.clientWidth / container.clientHeight;

      camera = new THREE.PerspectiveCamera(

        45,

        window.innerWidth / window.innerHeight,

        1,

        50000

      )

      camera.position.set(306, 1126, 7976);

      camera.lookAt(new THREE.Vector3(0, 0, 0));

      var ambientLight = new THREE.AmbientLight('#ffffff', 0.7) // offline

      scene.add(ambientLight)

      // renderer

      renderer = new THREE.WebGLRenderer();

      renderer.autoClear = false

      renderer.setSize(window.innerWidth, window.innerHeight);

      renderer.setPixelRatio(window.devicePixelRatio);

      container.appendChild(renderer.domElement);

      renderer.render(scene, camera);

      addCubes()

      addBloomPass()

      stats = new Stats();

      container.appendChild(stats.dom);

      controls = new OrbitControls(camera, renderer.domElement);

      window.addEventListener('resize', onWindowResize, false);

    }

    function update() {

      // controls.update();

      stats.update();

      // 渲染器清除颜色、深度或模板缓存. 此方法将颜色缓存初始化为当前颜色

      renderer.clear()

      camera.layers.set(1)

      if (bloomComposer) { bloomComposer.render() }

      // 清除深度缓存

      renderer.clearDepth()

      camera.layers.set(0)

      renderer.render(scene, camera)

      requestAnimationFrame(update);

    }

    function getC() {

      console.log(camera)

    }

    function onWindowResize() {

      let frustumSize = 200;

      let aspect = container.clientWidth / container.clientHeight;

      camera.left = frustumSize * aspect / -2;

      camera.right = frustumSize * aspect / 2;

      camera.top = frustumSize / 2;

      camera.bottom = frustumSize / -2;

      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function addBloomPass() {

      // RenderPass这个通道会渲染场景，但不会将渲染结果输出到屏幕上

      const renderScene = new RenderPass(scene, camera)

      const effectCopy = new ShaderPass(CopyShader); //传入了CopyShader着色器，用于拷贝渲染结果

      effectCopy.renderToScreen = true;

      // THREE.BloomPass(strength, kernelSize, sigma, Resolution)

      // strength 定义泛光效果的强度，值越高，明亮的区域越明亮，而且渗入较暗区域的也就越多

      // kernelSize 控制泛光的偏移量

      // sigma 控制泛光的锐利程度，值越高，泛光越模糊

      // Resolution 定义泛光的解析图，如果该值太低，结果的方块化就会越严重

      // const bloomPass = new BloomPass(2, 25, 4.0, 256); //BloomPass通道效果

      //创建效果组合器对象，可以在该对象上添加后期处理通道，通过配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤，在render循环中，使用EffectComposer渲染场景、应用通道，并输出结果。

      bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4,

				0.85);

			bloomPass.renderToScreen = true;

			bloomPass.threshold = params.bloomThreshold;

			bloomPass.strength = params.bloomStrength;

			bloomPass.radius = params.bloomRadius;

      bloomComposer = new EffectComposer(renderer)

      bloomComposer.setSize(window.innerWidth, window.innerHeight);

      bloomComposer.addPass(renderScene);

      bloomComposer.addPass(bloomPass);

      bloomComposer.addPass(effectCopy);

      bloomComposer.render()

    }

    function addCubes() {

      // 创建两个box， 将box进行layers进行分层是重要代码，camera默认渲染0层

      let texture = new THREE.TextureLoader().load("./img/backav9.jpg")

      let texture1 = new THREE.TextureLoader().load("./img/py.png")

      var geometry1 = new THREE.BoxGeometry(400, 400, 400);

      var material1 = new THREE.MeshBasicMaterial({

        map: texture

      });

      var cube1 = new THREE.Mesh(geometry1, material1);

      // 重要代码，将当前创建的box分配到0层

      // cube1.layers.set(1) // 和方案一仅仅只有这里不同

			cube1.layers.enable(1); // 分层

      cube1.position.set(1200, 0, 0)

      scene.add(cube1);

      var geometry2 = new THREE.BoxGeometry(400, 400, 400);

      var material2 = new THREE.MeshBasicMaterial({

        map: texture1

      });

      var cube2 = new THREE.Mesh(geometry2, material2);

      // 重要代码，将当前创建的box分配到1层

      // cube2.layers.set(0) // 和方案一仅仅只有这里不同

			cube2.layers.enable(0); // 分层

      cube2.position.set(600, 0, 0)

      scene.add(cube2);

    }

    function initGui() {

      var 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);

			});

		}

    initGui()

  </script>

</body>

</html>

three.js实现分模块添加梦幻bloom辉光光晕方案--详细注释版本~~方案三版本~~的更多相关文章

  1. 配置动态加载模块和js分模块打包，生产环境和开发环境公共常量配置

    1. 话不多少 先上代码:  route.js  // 引用模板 分模块编译 const main = r => require.ensure([], () => r(require('. ...

  2. Python+request 分模块存放接口，多接口共用参数URL、headers的抽离，添加日志打印等《三》

    主要介绍内容如下: 1.分模块存放接口 2.多接口共用参数URL.headers的抽离为配置文件 3.添加日志打印 4.一个py文件运行所有所测的接口 如上介绍内容的作用: 1.分模块存放接口:方便多 ...

  3. 分模块创建maven项目（一）

    maven是一个项目构建和管理的工具. 我们可以通过maven仓库可以实现管理构建(主要是JAR还包括:WAR,ZIP,POM等等). 我们可以通过maven插件可以实现编译源代.产生Javadoc文 ...

  4. Maven02——回顾、整合ssh框架、分模块开发、私服

    1 回顾 1.1 Maven的好处 节省空间 对jar包做了统一管理 依赖管理 一键构建 可跨平台 应用在大型项目可提高开发效率 1.2 Maven安装部署配置 1.3 Maven的仓库 本地仓库 远 ...

  5. 若依项目分模块集成uflo2

    关于若依分模块创建项目可参考:https://www.cnblogs.com/conswin/p/9766186.html 了解uflo2,uflo2是一套由BSTEK自主研发的基于Java的工作流引 ...

  6. 写了十年JS却不知道模块化为何物？

    作者:肖光宇 野狗科技联合创始人,先后在猫扑.百度.搜狗任职,爱折腾的前端工程师. 野狗官博:https://blog.wilddog.com/ 野狗官网:https://www.wilddog.co ...

  7. java分模块项目在idea中使用maven打包失败（ps:maven常用到的命令）

    一.分模块项目打包失败 情况:项目是分模块创建的,一些公共的方法是单独的一个模块common,其他模块依赖于此模块,poom依赖已经添加了,项目可以正常运行,但使用maven打包时出现了问题:找不到依 ...

  8. node.js使用mysql模块的坑

      之前用node.js写的订餐系统,很容易挂掉,一直也没想去解决它.今天看了一下,试了试,原因是在连接数据库的时候没有对error事件进行处理,导致程序一直挂在那里,需要重启服务才能正常使用.   ...

  9. node.js入门(二) 模块 事件驱动

    模块化结构 node.js 使用了 CommonJS 定义的模块系统.不同的功能组件被划分成不同的模块.应用可以根据自己的需要来选择使用合适的模块.每个模块都会暴露一些公共的方法或属性.模块使用者直接 ...

  10. Spring_day04--HibernateTemplate介绍_整合其他方式_Spring分模块开发

    HibernateTemplate介绍 1 HibernateTemplate对hibernate框架进行封装, 直接调用HibernateTemplate里面的方法实现功能 2 HibernateT ...

随机推荐

  1. python的微积分运算

    import sympy sympy.init_printing() from sympy import I, pi, oo import numpy as np 求函数的导数 x = sympy.S ...

  2. JS数据结构与算法-队列结构

    队列结构 一.认识队列 受限的线性结构: 我们已经学习了一种受限的线性结构:栈结构. 并且已经知道这种受限的数据结构对于解决某些特定问题,会有特别的 效果. 下面,我们再来学习另外一个受限的数据结构: ...

  3. 【深入浅出 Yarn 架构与实现】2-1 Yarn 基础库概述

    了解 Yarn 基础库是后面阅读 Yarn 源码的基础,本节对 Yarn 基础库做总体的介绍.并对其中使用的第三方库 Protocol Buffers 和 Avro 是什么.怎么用做简要的介绍. 一. ...

  4. Linux环境下执行脚本重启Weblogic控制台中部署的应用程序

    之前有写过一篇博文介绍切换登录方式的脚本,脚本中存在一个缺点:仍需手动去Weblogic控制台重启应用程序:本文即介绍如何在脚本中更新Weblogic控制台中部署的应用程序. 一.配置Weblogic ...

  5. 设计模式学习（二十四）：Spring 中使用到的设计模式

    设计模式学习(二十四):Spring 中使用到的设计模式 作者:Grey 原文地址: 博客园:设计模式学习(二十四):Spring 中使用到的设计模式 CSDN:设计模式学习(二十四):Spring ...

  6. 嵌入式-C语言基础：联合体和共用体的概念

    有时候同一块内存空间存放类型不同,不同类型的变量共享一块空间. 结构体和共用体的区别: (1)结构体元素有各自单独空间,共用体元素共享空间,空间大小由最大类型确定. (2)结构体元素互不影响共用体赋值 ...

  7. JUC学习笔记——共享模型之不可变

    JUC学习笔记--共享模型之不可变 在本系列内容中我们会对JUC做一个系统的学习,本片将会介绍JUC的不可变内容 我们会分为以下几部分进行介绍: 不可变案例 不可变设计 模式之享元 原理之final ...

  8. MediatRPC - 基于MediatR和Quic通讯实现的RPC框架，比GRPC更简洁更低耦合，开源发布第一版

    大家好,我是失业在家,正在找工作的博主Jerry.作为一个.Net架构师,就要研究编程艺术,例如SOLID原则和各种设计模式.根据这些原则和实践,实现了一个更简洁更低耦合的RPC(Remote Pro ...

  9. vivo霍金实验平台设计与实践-平台产品系列02

    vivo 互联网平台产品研发团队 - Bao Dawei 本篇介绍了vivo霍金实验平台的系统架构以及业务发展过程中遇到的问题以及对应的解决方案. <平台产品>系列文章: 1.vivo平台 ...

  10. 正则表达式之前戏、字符组、量词、特殊符号、贪婪与非贪婪匹配等，python正则模块之re

    目录 正则表达式前戏 正则表达式之字符组 正则表达式之特殊符号 正则表达式之量词 贪婪匹配与非贪婪匹配 转义符 正则表达式实战建议 re模块 re模块补充说明 作业 正则表达式前戏 案例:京东注册手机 ...