先上图对比方案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批量依赖包操作

      1.导出所有的python依赖 pip freeze > requirements.txt #requirements.txt 为自定名称,可以指定路径 2.自动安装所有依赖包 pip in ...

  2. 【JavaSE】抽象类、接口

    接口的诞生 接口其实就是一种标准一种规范. 先从生活中的例子讲起,理解含义和概念后,再去理解程序会更容易理解一些. 生活中接口无处不在,比如著名的USB接口,大家可以试想一下,如果没有像USB这种统一 ...

  3. SQL---ltrim()和rtrim()函数的使用

    背景 去除字符串首尾空格大家肯定第一个想到trim()函数,不过在sqlserver中是没有这个函数的,却而代之的是ltrim()和rtrim()两个函数. 看到名字所有人都 知道做什么用的了,ltr ...

  4. N32G4系列——复用功能重映射（USART为例）

    开发测试环境:SDK,N32G455x系列芯片 在国民MCU中G系列IO口有第二复用功能,这时需要用到重映射功能. 一.系列芯片手册定义 1.1.芯片IO口默认功能查看 如图,在该系列芯片的数据手册中 ...

  5. Istio(十一)：向istio服务网格中引入虚拟机

    目录 一.模块概览 二.系统环境 三.虚拟机负载 3.1 虚拟机负载 3.2 单网络架构 3.3 多网络架构 3.4 Istio 中如何表示虚拟机工作负载? 四.实战:向istio Mesh中引入虚拟 ...

  6. Excel常用需求

    常用数据统计格式 外列表套内列表 [['name1','age1'],['name2','age2'],['name3','age3']] 外列表套内字典 [{'name':'xie','score' ...

  7. 记一次HTTPClient模拟登录获取Cookie的开发历程

    记一次HTTPClient模拟登录获取Cookie的开发历程 环境: ​ springboot : 2.7 ​ jdk: 1.8 ​ httpClient : 4.5.13 设计方案 ​ 通过新建一个 ...

  8. Linux内核替换的一种简单方法

    前言 使用现有centos的镜像,在海光机器上出现了无法运行的情况,grub引导后就只剩下光标一直在闪,无任何字符输出.这种情况大概率是因为Linux的内核无法运行在海光的CPU上所导致的. 已得知L ...

  9. Perl引用

    引用就是C语言中的指针,perl引用是一个标量类型可以指向变量.数组.哈希表(也叫关联数组)甚至子程序,可以应用在程序的任何地方. 在变量前面加一个\就得到了这个变量的一个引用 #!usr/bin/p ...

  10. 2022-11-09 Acwing每日一题

    本系列所有题目均为Acwing课的内容,发表博客既是为了学习总结,加深自己的印象,同时也是为了以后回过头来看时,不会感叹虚度光阴罢了,因此如果出现错误,欢迎大家能够指出错误,我会认真改正的.同时也希望 ...