three.js设置物体轮廓发光和物体发光

设置物体轮廓发光

在这里插入图片描述

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 导入后期合成
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';// 场景
const scene = new THREE.Scene();// 模型
// 顶点着色器
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 片元着色器
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(5, 0, 0);
scene.add(cube);const torusKnotGeometry = new THREE.TorusKnotGeometry(1, 0.35, 100, 16);
const torusKnotMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const torusKnot = new THREE.Mesh(torusKnotGeometry, torusKnotMaterial);
torusKnot.position.set(0, 0, 0);
scene.add(torusKnot);// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);// 辅助线
const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);// 初始化渲染器
const renderer = new THREE.WebGLRenderer({antialias: true // 锯齿模糊
});
// renderer.setClearColor(0x444444, 1); // 设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);// 相机围绕目标进行轨道运动; 注意OrbitControls会影响 camera.lookAt(x,y,z)失效，需设置controls.target.set(x,y,z)才能生效
const controls = new OrbitControls(camera, renderer.domElement);
// 可设置控制器阻尼，让控制器更有真实效果，必须在你的动画循环里调用.update()
controls.enableDamping = true// 添加后期合成
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// 导入OutlinePass
const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight),scene,camera
);
outlinePass.edgeStrength = 10; // 描边的宽度
outlinePass.edgeGlow = 1; // 光晕
outlinePass.edgeThickness = 2; // 光晕粗细度
outlinePass.pulsePeriod = 5; // 闪烁频率（呼吸灯）
outlinePass.visibleEdgeColor = new THREE.Color(0xff3333); // 描边颜色
outlinePass.hiddenEdgeColor = new THREE.Color(0x000000); // 光晕颜色
// new THREE.TextureLoader().load('./26ad6804f422468988c3de6fe003bd6a.jpeg', texture => {
//   texture.wrapS = THREE.RepeatWrapping;
//   texture.wrapT = THREE.RepeatWrapping;
//   outlinePass.patternTexture = texture;
//   outlinePass.usePatternTexture = true;
// });
composer.addPass(outlinePass);// 设置发光的物体
outlinePass.selectedObjects = [torusKnot]
window.addEventListener('click', (e) => {outlinePass.selectedObjects = [cube];
})// 浏览器动画
const clock = new THREE.Clock()
function render(time) {controls.update() // 阻尼控制器更新// renderer.render(scene, camera);composer.render(); // 后期合成来渲染requestAnimationFrame(render); // 请求动画帧
}
render()// 监听画面变化，更新渲染画面
window.addEventListener('resize', () => {// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
})
</script>

设置物体泛光

在这里插入图片描述

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 导入后期合成
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';// 场景
const scene = new THREE.Scene();// 模型
// 顶点着色器
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 片元着色器
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(5, 0, 0);
cube.layers.set(1) // 设置物体所在的层级，默认层级为0
scene.add(cube);const torusKnotGeometry = new THREE.TorusKnotGeometry(1, 0.35, 100, 16);
const torusKnotMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const torusKnot = new THREE.Mesh(torusKnotGeometry, torusKnotMaterial);
torusKnot.position.set(0, 0, 0);
scene.add(torusKnot);// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);// 辅助线
const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);// 初始化渲染器
const renderer = new THREE.WebGLRenderer({antialias: true, // 锯齿模糊
});
// renderer.setClearColor(0x444444, 1); // 设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
renderer.autoClear = false; // 不自动清除颜色和深度缓冲区
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);// 相机围绕目标进行轨道运动; 注意OrbitControls会影响 camera.lookAt(x,y,z)失效，需设置controls.target.set(x,y,z)才能生效
const controls = new OrbitControls(camera, renderer.domElement);
// 可设置控制器阻尼，让控制器更有真实效果，必须在你的动画循环里调用.update()
controls.enableDamping = true// 添加后期合成
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);// // 描边，突出物体轮廓
// const outlinePass = new OutlinePass(
//   new THREE.Vector2(window.innerWidth, window.innerHeight),
//   scene,
//   camera
// );
// outlinePass.edgeStrength = 10; // 描边的宽度
// outlinePass.edgeGlow = 1; // 光晕
// outlinePass.edgeThickness = 2; // 光晕粗细度
// outlinePass.pulsePeriod = 5; // 闪烁频率（呼吸灯）
// outlinePass.visibleEdgeColor = new THREE.Color(0xff3333); // 描边颜色
// outlinePass.hiddenEdgeColor = new THREE.Color(0x000000); // 光晕颜色
// // new THREE.TextureLoader().load('./26ad6804f422468988c3de6fe003bd6a.jpeg', texture => {
// //   texture.wrapS = THREE.RepeatWrapping;
// //   texture.wrapT = THREE.RepeatWrapping;
// //   outlinePass.patternTexture = texture;
// //   outlinePass.usePatternTexture = true;
// // });
// composer.addPass(outlinePass);// // 设置发光的物体
// outlinePass.selectedObjects = [torusKnot]
// window.addEventListener('click', (e) => {
//   outlinePass.selectedObjects = [cube];
// })// 泛光（光照氛围）
const unrealBloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),0.5, // 强度0.5, // 半径0.5 // > 0.5泛光
)
composer.addPass(unrealBloomPass);// 点击泛光和不泛光控制
window.addEventListener('click', (e) => {// console.log(cube.layers.mask); // 2的次方，通过set设置if (cube.layers.mask === 1) {cube.layers.set(1);} else {cube.layers.set(0);}
})// 浏览器动画
const clock = new THREE.Clock()
function render(time) {controls.update() // 阻尼控制器更新// 清除颜色和深度缓冲区renderer.clear();// 渲染层级 0 并应用后期处理camera.layers.set(0);composer.render();// 清除深度缓冲区，避免深度冲突renderer.clearDepth();// 渲染层级 1 不应用后期处理camera.layers.set(1);renderer.render(scene, camera);requestAnimationFrame(render); // 请求动画帧
}
render()// 监听画面变化，更新渲染画面
window.addEventListener('resize', () => {// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
})
</script>

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

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

相关文章

homebrew安装配置Python（MAC版）

homebrew安装配置Python（MAC版）

Mac系统自带python路径为: /System/Library/Frameworks/Python.framework/Versionbrew 安装 Python3 在终端输入以下命令&#xff1a; brew search python3 # 查看支持安装的版本 brew install python3就可以轻松easy安装python了&#xff0c;安装完成后提示 查看 pyth…
阅读更多...
如何建设网站？网站建设简单步骤有哪些？

如何建设网站？网站建设简单步骤有哪些？

新手如何开展网站建设&#xff1f;网站建设包括哪些步骤&#xff1f; 在开展网站建设之前先清楚了解网站建设的流程和步骤&#xff1a;注册域名、租用虚拟主机/服务器、建站工具的选取、网站建设流程详细流程共计7步&#xff0c;分别是注册域名、域名实名制、服务器或虚拟主机、…
阅读更多...
当K8S容器没有bash时高阶排查手段

当K8S容器没有bash时高阶排查手段

遇到容器没有bash甚至没有sh的情况&#xff0c;就像被困在没有门窗的房间。但真正的K8S运维高手&#xff0c;即使面对这种情况也能游刃有余。 一、无Shell容器三大特征 极简主义&#xff1a;移除所有非必要组件&#xff08;如/bin/sh&#xff09;安全加固&#xff1a;减少攻击…
阅读更多...
Python案例实战《手势识别》

Python案例实战《手势识别》

目录 1、效果图2、手势识别关键步骤&#xff08;1&#xff09; 导入必要的库&#xff08;2&#xff09;配置 MediaPipe&#xff08;3&#xff09;启动摄像头&#xff08;4&#xff09;设置手指张开判断的距离阈值&#xff08;5&#xff09;计算手指之间的欧几里得距离&#xff…
阅读更多...
5G赋能农业物联网：智能化种植的新纪元

5G赋能农业物联网：智能化种植的新纪元

5G赋能农业物联网&#xff1a;智能化种植的新纪元 在农业领域&#xff0c;精准化、智能化已成为现代农业发展的方向。而5G的出现&#xff0c;让农业物联网&#xff08;Agri-IoT&#xff09;突破了传统的瓶颈&#xff0c;真正实现了实时监测、高效数据传输、智能化决策&#xf…
阅读更多...
VIVADO IP核整理（二）——FFT

VIVADO IP核整理（二）——FFT

目录 IP 核配置IP 核接口s_axis_config_tdata 配置输入输出端口描述 仿真 参考&#xff1a;FFT IP核 详细介绍 参考&#xff1a;官方文档介绍 IP 核配置 在 IP Catalog 中搜索&#xff1a;Fast Fourier Transform 按照上图所示进行配置&#xff0c;下文对配置内容进行详述。 …
阅读更多...
【计算机基础】任意进制转换方法详解

【计算机基础】任意进制转换方法详解

文章目录 一、通用进制转换（整数部分）1. R进制转十进制（整数）2. 十进制转R进制（整数）二、通用进制转换（小数部分）1. 十进制小数转R进制2. R进制小数转十进制三、二进制与十进制互转（整数部分）1. 二进制转十进制（整数）2. 十进制转二进制（整数）四、二进制与十进制互…
阅读更多...
鼠标交互初体验：点击屏幕生成彩色气泡（EGE 库基础）

鼠标交互初体验：点击屏幕生成彩色气泡（EGE 库基础）

在图形编程领域&#xff0c;实现与用户的交互是让程序变得生动有趣的关键环节。对于初学者来说&#xff0c;使用合适的图形库能大幅降低开发难度&#xff0c;快速实现创意想法。EGE 库作为一款简单易用且功能强大的 C/C 图形库&#xff0c;特别适合新手入门图形交互编程。本文将…
阅读更多...
Office 三大组件Excel、Word、Access 里 VBA 区别对比

Office 三大组件Excel、Word、Access 里 VBA 区别对比

以下是Excel、Word和Access在VBA中的主要区别对比及详细说明： 核心对象模型 Excel Workbook（工作簿）→ Worksheet（工作表）→ Range（单元格区域） 核心围绕单元格数据处理，如 Cells(1,1).Value = "数据" Word Document（文档）→ Range（文本范围）→ Paragrap…
阅读更多...
【上位机——MFC】对象和控件绑定

【上位机——MFC】对象和控件绑定

对象和控件绑定 将控件窗口和类对象绑定具有两大作用 如果和数据类对象绑定&#xff0c;对象和控件可以进行数据交换。 如果和控件类对象绑定&#xff0c;对象就可以代表整个控件。 与数据类型对象绑定的使用 数据类型对象和控件可实现数据交互重写父类成员虚函数DoDataExch…
阅读更多...
Excel处理控件Aspose.Cells教程：压缩Excel文件完整指南

Excel处理控件Aspose.Cells教程：压缩Excel文件完整指南

Excel 电子表格是管理、分析和可视化数据的有效工具&#xff0c;但随着文件复杂度的增加&#xff0c;它们很快就会变得臃肿。无论是由于数据集庞大、嵌入图片、格式过多还是隐藏工作表&#xff0c;Excel 文件的大小都可能迅速膨胀&#xff0c;导致打开速度变慢、难以通过电子邮…
阅读更多...
软考【软考高级QA】

软考【软考高级QA】

软考高级QA 1.操作系统管理和调度进程时&#xff0c;有哪些状态&#xff1f;&#xff08;5种&#xff09;2.操作系统管理和调度进程时&#xff0c;会进行哪些状态转换&#xff1f; 1.操作系统管理和调度进程时&#xff0c;有哪些状态&#xff1f;&#xff08;5种&#xff09; …
阅读更多...
神经网络基础-从零开始搭建一个神经网络

神经网络基础-从零开始搭建一个神经网络

一、什么是神经网络 人工神经网络&#xff08;Articial Neural Network&#xff0c;简写为ANN&#xff09;也称为神经网络&#xff08;NN),是一种模仿生物神经网络和功能的计算模型&#xff0c;人脑可以看做是一个生物神经网络&#xff0c;由众多的神经元连接而成&#xff0c;…
阅读更多...
Golang 接口 vs Rust Trait：一场关于抽象的哲学对话

Golang 接口 vs Rust Trait：一场关于抽象的哲学对话

一、引言 在现代编程语言中&#xff0c;接口&#xff08;Interface&#xff09; 和 Trait 是实现多态和抽象行为的关键机制。它们允许我们定义行为契约&#xff0c;让不同的类型共享相同的语义接口&#xff0c;从而提升代码的复用性和扩展性。 Go 和 Rust 分别代表了两种截然…
阅读更多...
java实现一个操作日志模块功能，怎么设计

java实现一个操作日志模块功能，怎么设计

为了设计一个高效、可靠且可扩展的操作日志模块&#xff0c;可以结合 ​AOP&#xff08;面向切面编程&#xff09;​、异步处理​&#xff08;多线程或MQ&#xff09;以及合理的存储策略&#xff0c;具体方案如下&#xff1a; ​1. 技术选型与架构设计​ ​​(1) AOP 实现非侵…
阅读更多...
【论文阅读】HunyuanVideo: A Systematic Framework For Large Video Generative Models

【论文阅读】HunyuanVideo: A Systematic Framework For Large Video Generative Models

HunyuanVideo: A Systematic Framework For Large Video Generative Models 原文摘要 研究背景与问题 视频生成的变革性影响&#xff1a;近期视频生成技术的进步深刻改变了个人生活与行业应用。 闭源模型的垄断&#xff1a;主流视频生成模型&#xff08;如Runway Gen-3、Luma …
阅读更多...
在ubuntu中brpc框架安装

在ubuntu中brpc框架安装

下载最新release版本&#xff0c; 稳定性好&#xff0c; 网址链接。 一、解压源码包 # 解压到当前目录 tar -xzvf brpc-1.12.1.tar.gz# 进入解压后的目录 cd brpc-1.12.1二、安装编译依赖&#xff08;Ubuntu/Debian&#xff09; sudo apt update sudo apt install -y g make…
阅读更多...
《深入理解 Java 虚拟机》笔记

《深入理解 Java 虚拟机》笔记

文章目录 最近笔记内存管理执行子系统程序编译、代码优化 老版本 最近笔记 内存管理 执行子系统 程序编译、代码优化 老版本
阅读更多...
【Linuc】深入理解 Linux 文件权限

【Linuc】深入理解 Linux 文件权限

文章目录 一、权限基础解析1. 权限三元组2. 权限类型与数字映射二、查看文件权限三、修改权限实战1. chmod 命令符号模式数字模式（推荐）2. chown 修改归属四、特殊权限机制1. SetUID (Set User ID)2. SetGID (Set Group ID)3. Sticky Bit五、高级权限管理1. 默认权限控制2. A…
阅读更多...
RabbitMq学习（第一天）

RabbitMq学习（第一天）

文章目录 1、mq(消息队列)概述2、RabbitMQ环境搭建3、java基于AMQP协议操作RabbitMQ4、基于Spring AMQP操作RabbitMQ5、代码中创建队列与交换机①、配置类创建②、基于RabbitListener注解创建 6、RabbitMQ详解①、work模型②、交换机1、Fanout(广播)交换机2、Direct(定向)交换机…
阅读更多...
最新文章

Copyright @ 2022~2023