three.js 实现辉光（原生JS）

在three.js后期处理中，实现通道辉光效果，效果图如下：

一、模型创建

在三维场景中，创建了两个对象mesh（正方体）bmesh（球体）

//创建模型//正方体var geometry = new THREE.BoxGeometry(100,100,100);var material = new THREE.MeshLambertMaterial({color:0x0000ff});var mesh = new THREE.Mesh(geometry,material);mesh.layers.set(0);scene.add(mesh);//球体var bgeometry = new THREE.SphereGeometry(60,40,40);var bmaterial  = new THREE.MeshLambertMaterial({ color: 0xff5500,transparent:true,opacity:0.8,wireframe:true});var bmesh = new THREE.Mesh(bgeometry,bmaterial);bmesh.position.y = 100;bmesh.layers.set(1);scene.add(bmesh);

PS：如果仅实现全场景的全局辉光效果，可直接在场景中进行后述光晕的设置，但是为了实现局部辉光，让一个物体发光，另一个物体正常显示，我们采用layer图层显示，对两个对象设置不同的图层，以实现不同的渲染显示。

二、光晕设置

这里需要用到如下三个对象，需要从three中导包

import { RenderPass } from "./three/examples/jsm/postprocessing/RenderPass.js";
import { UnrealBloomPass} from "./three/examples/jsm/postprocessing/UnrealBloomPass.js";
import { EffectComposer } from "./three/examples/jsm/postprocessing/EffectComposer.js";

通过构造函数，创建对象如下：

//设置光晕var composer = new EffectComposer(renderer);        //效果组合器//创建通道var renderScene = new RenderPass(scene, camera);    //创建通道var bloomPass = new UnrealBloomPass(//参数一：泛光覆盖场景大小，二维向量类型new THREE.Vector2(window.innerWidth, window.innerHeight),//参数二：bloomStrength 泛光强度，值越大明亮的区域越亮，较暗区域变亮的范围越广1.5,//参数三：bloomRadius 泛光散发半径0.3,//参数四：bloomThreshold 泛光的光照强度阈值，如果照在物体上的光照强度大于该值就会产生泛光0.75);

赋值间接对象，组合composer

//赋值间接对象var params = {exposure: 0,bloomStrength: 1.5,bloomThreshold: 0,bloomRadius: 0,};bloomPass.threshold = params.bloomThreshold;bloomPass.strength = params.bloomStrength;bloomPass.radius = params.bloomRadius;composer.addPass(renderScene);composer.addPass(bloomPass);

三、渲染

function render(){camera.layers.set(0);composer.render();camera.layers.set(1);   renderer.render(scene, camera);requestAnimationFrame(render);}
render();

three.js 实现辉光（原生JS）相关推荐

php上js实现ajax请求,原生JS如何实现Ajax通过POST方式与PHP进行交互的方法
原生JS如何实现Ajax通过POST方式与PHP进行交互的方法发布时间:2021-04-20 11:28:22 来源:亿速云阅读:52 作者:小新这篇文章将为大家详细讲解有关原生JS如何实现Aj ...
原生JS那些事：原生JS添加和删除class类名
2019独角兽企业重金招聘Python工程师标准>>> 如何使用原生js给一个节点添加和删除class名? 由于我们一直习惯于使用jQ封装好的方法,偶尔项目中也会用原生js,这就要了 ...
js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
js 控制鼠标_原生js实现改变视频播放速率
前言:前几天考研成绩刚刚出来,有人欢喜有人悲,不管结果怎么样,只要努力过,就不存在遗憾一说.大家都知道考研复习的时候会有大量的时间用来看教学视频,就比如说"张宇高数"等等.考研复习 ...
JS 九宫格算法用原生js实现
九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位公式: 行 row=parseInt(i/cols ...
js php排序表格,原生JS实现表格排序
最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点:call方法使用 sort方法深 ...
js html颜色代码,原生js编写的浏览器安全色网页拾色器色盘生成颜色代码
原生js编写的浏览器安全色网页拾色器 by js.alixixi.com #abc-colorPicker .colorPick-close,#filter-colorPicker .colorPic ...
原生js怎么追加html,原生JS改变HTML内容
最近发现总是把原生JS语法和诸多框架库神马的语法搞混,打算暂时弃用各种库,回归到原生来,好好抠一抠所有的细节,跳一跳各种坑,才能飞得更远.PS. 突然想起冰火里面三眼乌鸦对布兰说的那句话--You'l ...
原生js追加html代码,原生js实现给指定元素的后面追加内容
复制代码代码如下: var header1 = document.getElementById("header"); var p = document.createElement ...

three.js 实现辉光（原生JS）

three.js 实现辉光（原生JS）相关推荐

最新文章

热门文章