先上图对比方案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.httprunner3入门

    一.httprunner3 httprunner是一款面向HTTP(S)协议的通用开源测试框架 支持三种格式的用例:YAML/JSON/Pytest,httprunner3以前不支持pytest用例 ...

  2. 亚马逊云 RDB数据故障转移(多可用区)

    RDB关系数据库(Relational Database,RDB) 创建名为VPC for RDS的vpc 两个可用区,两组公内网 创建安全组 创建RDS数据库实例用的数据库子网组 创建RDS数据库实 ...

  3. rocky8删除/etc/fstab 和/boot/所有文件，通过光盘救援模式恢复

    rocky8删除/etc/fstab 和/boot/所有文件,通过光盘救援模式恢复 mkdir /rootdir 先通过df和lsblk确定那个分区是根,如果确定不了,就先挂载一个分区,查看里边的文件 ...

  4. 使用gitee创建个人的图床

    使用gitee创建个人的图床 1.如果还没有gitee(码云)账号,可以注册一个,注册后登陆进入个人中心 2.点击新建仓库 3.进入创建页面 创建成功 5.在本地电脑创建一个文件夹,专门用来放置要上传 ...

  5. C#和Open eVision Studio图像库联合编程-读取图像

    OpenFileDialog openFileDialog = new OpenFileDialog(); openFileDialog.Filter = "Image Files (*.t ...

  6. 用 vue3 中的 reduce（累加器） 随机生成100个字母，放入数组中，统计每个字母出现的次数

    一.首先不用 reduce() 来实现  代码如下: <template lang=""> <div> <h1>统计每个字母出现的次数,不使用r ...

  7. 2022春每日一题：Day 18

    题目:[JSOI2007]字符加密 很常见的做法,破环为链,然后以2n为总长再后缀排序,然后对于SA[i] < n 的,说明第i小后缀的编号是小于n的,也就是说,以i开头的编号是合法的,那么输出 ...

  8. 【Devexpress】gridcontorl设置某个特定单元格不可编辑

    在gridcontorl中一般情况下我们使用的都是设置一列不可编辑 那么如何设置一个单元格不可编辑呢 在gridView1_ShowingEditor事件中可以实现.这个事件的意思是允许取消激活编辑器 ...

  9. 《吐血整理》高级系列教程-吃透Fiddler抓包教程(35)-Fiddler如何抓取微信小程序的包-下篇

    1.简介 通过前边和宏哥的学习,我们了解到Android 7.0 之后增加了对第三方证书的限制,抓包工具(charles.fiddler等)提供的证书都无法通过校验,也就无法抓取HTTPS请求了,对测 ...

  10. 【云原生 • Docker】mysql、tomcat、nginx、redis 环境部署

    注意在应用部署之前,docker 服务必须是开启状态 systemctl start docker. 目录 一.MySQL 部署 二.Tomcat 部署 三.Nginx 部署 四.Redis 部署 一 ...