先上图对比方案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. 第二阶段：高级核心基础知识·第1章Linux三剑客·1

    1.用vmware添加一块10G的硬盘,且永久挂载到/data01中,写出详细的步骤 2.用自己语言描述raid0和raid1的区别 RAID 0: 将两个或以上相同信号,容量的硬盘组合,磁盘阵列的总 ...

  2. 七、kubernetes污点和容忍

    Kubernetes污点和容忍 一.Taint 和 Toleration介绍 节点亲和性,是 pod 的一种属性(偏好或硬性要求),它使 pod 被吸引到一类特定的节点.Taint 则相反,它使节点能 ...

  3. 无线adb连接

    使用USB数据线连接Android设备; 在dos命令行输入adb  tcpip  [xxxx]命令 (例如:adb tcpip 8888,xxx代表端口号); 断开USB数据线(数据线和设备断开连接 ...

  4. Docker | 常用命令——排错很有帮助

    众所周知,docker 排查问题相较而言是困难的.因此,熟知一些常用命令对我们快速的排查定位问题是非常有帮助的.下面让我们一起来学习一下吧 1.显示docker的系统信息 docker info [r ...

  5. Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境

    前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.example.文档.cli.本文内容是搭建 组件库的开发环境. 1 packages 目录 前面在项目根目录下创建了 ...

  6. 质数之和【计算第x个到第y个质数之和】

    题目:质数之和 已知,第一个质数是2,第二个质数是3,第三个质数是5,第四个质数是7,第五个质数是11,第六个质数是13,第七个质数是17,输入两个不相等的正整数a和b,求出第a个质数到第b个质数当中 ...

  7. civil3d安装教程2022序列号和密钥

    Civil3D2021 WIN10 64位安装步骤:1.先使用"百度网盘客户端"下载C3D21_CN_x64软件安装包到电脑磁盘里,并右击进行解压,安装前先断网,然后找到Autod ...

  8. [排序算法] 快速排序 (C++) (含三种写法)

    快速排序解释 快速排序 Quick Sort 与归并排序一样,也是典型的分治法的应用. (如果有对 归并排序还不了解的童鞋,可以看看这里哟~ 归并排序) 快速排序的分治模式 1.选取基准值,获取划分位 ...

  9. OSI传输层TCP与UDP协议、应用层简介、socket模块介绍及代码优化、半连接池的概念

    目录 传输层之TCP与UDP协议 应用层 socket模块 socket基本使用 代码优化 半连接池的概念 传输层之TCP与UDP协议 TCP与UDP都是用来规定通信方式的 通信的时候可以随心所欲的聊 ...

  10. 【RocketMQ】顺序消息实现原理

    全局有序 在RocketMQ中,如果使消息全局有序,可以为Topic设置一个消息队列,使用一个生产者单线程发送数据,消费者端也使用单线程进行消费,从而保证消息的全局有序,但是这种方式效率低,一般不使用 ...