VUE2+THREE.JS辉光设定和解决辉光导致背景变暗的问题

THREE.JS辉光设定和解决辉光导致背景变暗的问题

  • THREE.JS 辉光设定
  • THREE.JS 辉光导致背景变暗的问题
    • 1.设定背景图片
    • 2.初始化辉光
    • 3. animate 一直渲染辉光

THREE.JS 辉光设定

给我的设计好的fbx模型,已经设定好了模型发光材质,所以直接添加辉光效果,就可以自动发光
blender模型生成器里的发光只是生成器里的发光效果,导入到three里并不生效,需要用代码生成辉光效果

1.引入辉光参数

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

2.添加辉光方法

//添加辉光效果
initBollmPass() {let renderScene = new RenderPass(scene, camera);let bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.3, 0.5, 1); //辉光阀值,辉光半径,辉光强度bloomPass.renderToScene = TreeWalker;bloomPass.samples = 7; //采样次数composer = new EffectComposer(renderer);composer.setSize(window.innerWidth, window.innerHeight);composer.addPass(renderScene);composer.addPass(bloomPass);// 设置场景背景颜色scene.background = new THREE.Color("#182238");
},

3.动画执行
要想辉光一直有效,需要一直执行composer.render()方法:
animate方法中增加 composer.render();
在这里插入图片描述

THREE.JS 辉光导致背景变暗的问题

1.设定背景图片

scene.background = new THREE.TextureLoader().load("three/work-shop-bg.png");

2.初始化辉光

//初始化辉光
initEffectComposer() {// 场景渲染器effectComposer = new EffectComposer(renderer);const renderPass = new RenderPass(scene, camera);effectComposer.addPass(renderPass);//创建辉光效果unrealBloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.3, 0.5, 1);unrealBloomPass.renderToScreen = false;// 辉光合成器glowComposer = new EffectComposer(renderer);glowComposer.renderToScreen = false;glowComposer.addPass(new RenderPass(scene, camera));glowComposer.addPass(unrealBloomPass);// 着色器let shaderPass = new ShaderPass(new THREE.ShaderMaterial({uniforms: {baseTexture: { value: null },bloomTexture: { value: glowComposer.renderTarget2.texture },tDiffuse: {value: null,},},vertexShader:"\t\t\tvarying vec2 vUv;\n" +"\n" +"\t\t\tvoid main() {\n" +"\n" +"\t\t\t\tvUv = uv;\n" +"\n" +"\t\t\t\tgl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n" +"\n" +"\t\t\t}",fragmentShader:"\t\t\tuniform sampler2D baseTexture;\n" +"\t\t\tuniform sampler2D bloomTexture;\n" +"\n" +"\t\t\tvarying vec2 vUv;\n" +"\n" +"\t\t\tvoid main() {\n" +"\n" +"\t\t\t\tgl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );\n" +"\n" +"\t\t\t}",defines: {},}),"baseTexture");shaderPass.renderToScreen = true;shaderPass.needsSwap = true;effectComposer.addPass(shaderPass);
},

3. animate 一直渲染辉光

执行辉光效果器渲染:glowComposer.render();
执行场景效果器渲染:effectComposer.render();
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/185234.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前馈全连接层

B站教学视频链接:2.3.4前馈全连接层-part2_哔哩哔哩_bilibili

力扣1089题 复写零 双指针解法

2. 复写零 给你一个长度固定的整数数组 arr ,请你将该数组中出现的每个零都复写一遍,并将其余的元素向右平移。 注意:请不要在超过该数组长度的位置写入元素。请对输入的数组 就地 进行上述修改,不要从函数返回任何东西。 示例 1&…

微信小程序input type=nickname不能触发隐私政策?小程序隐私协议开发指南之nickname权限篇

小程序隐私协议开发指南之nickname权限篇 涉及处理用户个人信息的小程序开发者,需通过弹窗等明显方式提示用户阅读隐私政策等收集使用规则。 为规范开发者的用户个人信息处理行为,保障用户合法权益,微信要求开发者主动同步微信当前用户已阅读并同意小程序的隐私政策等收集使…

docker 推送tar包到远程仓库

tar 包 推送到远程仓库的步骤 - 导入镜像(docker load -i 镜像名称)示例:docker load -i yiyi-admin.tar- 打标签(docker tag 镜像id registry.cn-hangzhou.aliyuncs.com/空间名称/镜像名称:版本号)示例:docker tag $image_id reg…

Android 12.0 修改Android系统的通知自动成组的数量

场景: Android 系统对显示在通知列表中的同一个应用的通知进行分组管理,即相同的packageName中,当通知数量达到系统默认指定的数量时,会自动成一组. Android 12.0 中系统默认的自动成组数如下所示: 核心路径 : frameworks/base/core/res/res/values/config.xml<!-- 来自同…

AI 编程如何助力开发者高效完成架构设计工作?

▼最近直播超级多&#xff0c;预约保你有收获 今晚直播&#xff1a;《AI 编程技术架构剖析和案例开发实战》 —1— AI 编程能帮我们完成哪些工作&#xff1f; 从目前企业级种种现实场景应用来看&#xff0c;AI 编程已经成为一种帮助开发者解决架构设计复杂问题、提高编程效率以…

adb 命令获取当前页面的包名

adb shell "dumpsys window | grep mCurrentFocus"

使用OpenCompass评测rwkv模型教程

0x0. 前言 继续MLC-LLM 支持RWKV-5推理以及对RWKV-5的一些思考文章里面提到的想法&#xff0c;探索一下使用OpenCompass来评测RWKV模型&#xff0c;对模型的实际表现有一个更客观的了解。我在尝试的过程中也碰到了一些问题&#xff0c;所以这里记录一下使用OpenCompass评测的流…

Node【工具 01】Node Version Manager nvm安装使用(Node.js版本管理工具)

1.介绍 非专业前端开发工程师在构建项目时遇到如下问题&#xff1a; ERROR: This version of pnpm requires at least Node.js v16.14 The current version of Node.js is v14.17.0 Visit https://r.pnpm.io/comp to see the list of past pnpm versions with respective Nod…

【doccano】文本标注工具——属性级情感分析标注自己的业务数据

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ 【doccano】文本标注工具——属性级情感分析标注自己的业务数据 1.说明2.前提条件3.doccano创建项目4.添加数据集5.添加标签6.标注数据7.导出数据转换格式 1.说明 2.前提条件 确保doccano已经安装完成 可以参考文…

Python实现的二分查找算法(非递归实现)

一、二分查找算法的优缺点&#xff1a; 二分查找又称折半查找&#xff0c;优点是比较次数少&#xff0c;查找速度快&#xff0c;平均性能好&#xff1b;其缺点是要求 待查表为有序表&#xff0c;且插入删除困难。因此&#xff0c;二分查找方法适用于不经常变动而查找频繁的有 …

事务注解@Transactional

Override Transactional(rollbackFor RuntimeException.class) public Role insert(Role role) throws Exception { userMapper.deleteById(60); if(null!role){ // 抛出Exception&#xff0c;而rollbackFor RuntimeException.class&#xff0c;不回…

H5 keng

一、url转码&#xff0c;url传值得时候中文会被转义&#xff0c;通过 decodeURIComponent&#xff08; &#xff09; 进行转码 this.url decodeURIComponent(item.split()[1]) 编码的话用encodeURI( ) son.name encodeURI(infoJson.name) 二、H5页面在ios中滑动不流畅问题&…

广州华锐视点提供AI虚拟主播定制,为品牌注入新活力!

随着科技的飞速发展&#xff0c;人工智能已经逐渐渗透到我们生活的方方面面。在这个信息爆炸的时代&#xff0c;如何让您的品牌在众多竞争对手中脱颖而出&#xff0c;成为行业的佼佼者&#xff1f;答案就是——AI虚拟主播&#xff01; 广州华锐视点提供AI数字人定制服务&#x…

一些后端测试的东西

后端测试都测试些什么 接口测试最小单元测试联调测试 接口测试 接口测试要素 可重复性 异常覆盖 环境一致 如何进行方便的接口测试 测试工具&#xff1a; idea-httpRequest &#xff0c; apifox , postman, jmeter 如何使用idea进行高效的接口测试 编写接口 启动项目直接…

二十五、DSL查询文档(全文检索查询、精确查询、地理查询、复合查询)

目录 一、全文检索查询 1、match查询 语法: 2、multi_match查询 语法: 3、match和mult_match的区别 二、精确查询 1、term查询&#xff1a; 语法&#xff1a; 2、range查询&#xff1a;&#xff08;范围查询&#xff09; 语法&#xff1a; 三、地理查询 1、geo_bou…

发生这种情况 经常导致投资者的痛苦

在这个市场中&#xff0c;什么事会让人痛苦呢&#xff1f;有的投资者马上回答&#xff0c;因为亏损。说实话&#xff0c;如果经过刻意的练习&#xff0c;我们在一定程度上能克服亏损给人带来的痛感。但是有另一种情况也容易为投资者带来痛苦&#xff0c;下面我们就来讨论一下。…

游戏缺少d3dx9_43.dll修复方法分享,快速解决dll缺失问题

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“找不到d3dx9_43.dll文件”。这个错误通常出现在运行某些游戏或应用程序时&#xff0c;d3dx9_43.dll是一个动态链接库文件&#xff0c;它是DirectX 9的一部分&#xff0c;用于支持游戏中的3…

Egg.js的方法扩展

Extend-application 方法扩展 eggjs的方法的扩展和编写 Egg.js可以对内部的五种对象进行扩展&#xff0c;以下是可扩展的对象、说明、this指向和使用方式。 application对象方法拓展 按照Egg的约定&#xff0c;扩展的文件夹和文件的名字必须是固定的。比如要对application扩…

亚马逊云科技re:Invent Peter DeSantis演讲,数据规模拓展无极限引领Serverless构建之路

re:lnvent 2023 Peter DeSantis主题演讲&#xff0c;数据规模拓展无极限引领Serverless构建之路&#xff08;Road to Serverless&#xff09;。 Logical Qubit全新发布&#xff1a;量子计算硬件&#xff0c;6倍的量子纠错效率提升。 Amazon全新发布Redshift Serverless&#xf…