当前位置：首页 > news >正文

vue3 threejs 物体发光描边

news 来源：原创 2025/7/1 23:12:12

threejs官网案例： three.js examples

我的代码（标注了重点代码，加上即可）

<template><div class="greenhouse" ref="canvasContainerRef"></div></template><script setup>
import * as THREE from "three";
import anime from "animejs"import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";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 { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';//重点import { ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const renderer = ref(); //渲染器let scene = new THREE.Scene(); //场景--scene是只读属性
const camera = ref(null); //相机
let orbitControls = null
let composer = null//重点
let effectFXAA = null//重点
const initThree = () => {// width和height用来设置Three.js输出Canvas画布尺寸，同时用来辅助设置相机渲染范围camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);camera.value.position.set(200, 200, 200);// scene.background = new THREE.Color(0xffffff);// 创建渲染器renderer.value = new THREE.WebGLRenderer({antialias: true, //开启抗锯齿（否则加载的模型有锯齿--）});renderer.value.setSize(window.innerWidth, window.innerHeight);renderer.value.setPixelRatio(window.devicePixelRatio); //设置设备像素比率,防止Canvas画布输出模糊。const canvasContainerRef = proxy.$refs["canvasContainerRef"];//环境光var ambient = new THREE.AmbientLight(0xffffff, 1);scene.add(ambient);canvasContainerRef.appendChild(renderer.value.domElement);const axesHelper = new THREE.AxesHelper(150);scene.add(axesHelper);orbitControls = new OrbitControls(camera.value, renderer.value.domElement); //旋转、放大缩小// 初始化加载器const loader = new GLTFLoader();renderer.value.outputEncoding = THREE.sRGBEncoding; //解决加载gltf格式模型纹理贴图和原图不一样问题// 创建后处理对象EffectComposer，WebGL渲染器作为参数composer = new EffectComposer(renderer.value);//重点// 创建一个渲染器通道，场景和相机作为参数const renderPass = new RenderPass(scene, camera.value);//重点composer.addPass(renderPass);//重点const v2 = new THREE.Vector2(window.innerWidth, window.innerHeight);//重点const outlinePass = new OutlinePass(v2, scene, camera.value);//重点// 设置描边参数  //重点outlinePass.visibleEdgeColor.set(0xaeb63e); // 可见边颜色（绿色）outlinePass.hiddenEdgeColor.set(0x0000ff);  // 隐藏边颜色（蓝色）outlinePass.edgeStrength = 8.0;            // 边缘强度outlinePass.edgeThickness = 3.0;           // 边缘厚度outlinePass.pulsePeriod = 4;outlinePass.edgeGlow = 0.7;//MeshLambertMaterial受光照影响const material = new THREE.MeshLambertMaterial({color: 0xa1a314});const geometry = new THREE.BoxGeometry(100, 100, 100);const mesh = new THREE.Mesh(geometry, material);scene.add(mesh)composer.addPass(outlinePass);//重点effectFXAA = new ShaderPass(FXAAShader);//重点effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);//重点composer.addPass(effectFXAA);//重点// 一个模型对象outlinePass.selectedObjects = [mesh];//重点// loader.load("./士兵.glb", (gltf) => {//     scene.add(gltf.scene)// });scene.add(camera.value);animateRender();
};// 动画循环
const animateRender = () => {requestAnimationFrame(animateRender);//  renderer.value.render(scene, camera.value)composer.render(); // 只需要调用composer.render()//重点};onMounted(() => {initThree()
});
</script><style scoped lang="scss"></style>

有两点注意：

一、vue3里面申明的scene composer effectFXAA 不能定义为响应式否则会报错。

二、由于使用了composer.render()，所以抗锯齿会失效，模型会有锯齿。

vue3 threejs 物体发光描边

threejs官网案例： three.js examples 我的代码（标注了重点代码，加上即可） <template><div class"greenhouse" ref"canvasContainerRef"></div></template><script setup> im…...

编程日记 2025/7/1 23:12:12

java的synchronized 原理及功能

简介： Java中的synchronized关键字是一种同步机制，用于控制多个线程对共享资源的访问。原理： 在Java锁有一个内部锁 Intrinsic Lock，也称为监视器锁或管程锁，每个Java对象都有一个关联的监视器锁，隐式锁…...

编程日记 2025/7/1 22:32:47

问题背景给你一个长度为 n n n 的整数数组 n u m s nums nums 和一个二维数组 q u e r i e s queries queries，其中 q u e r i e s [ i ] [ l i , r i , v a l i ] queries[i] [l_i, r_i, val_i] queries[i][li,ri,vali]。每个 q u e r i e s [ i ]…...

编程日记 2025/7/1 22:33:19

LangChain入门和应用#1

LangChain 是一个全方位的、基于大语言模型这种预测能力的应用开发工具，它的灵活性和模块化特性使得处理语言模型变得极其简便。不论你在何时何地，都能利用它流畅地调用语言模型，并基于语言模型的“预测”或者说“推理”能力开发新的应用 La…...

编程日记 2025/7/1 22:40:48

[每日一题] 3356. 零数组变换ii

文章目录 1. 题目链接2. 题目描述3. 题目示例4. 解题思路5. 题解代码6. 复杂度分析 1. 题目链接 3356. 零数组变换 II - 力扣（LeetCode） 2. 题目描述给你一个长度为 n 的整数数组 nums 和一个二维数组 queries，其中 queries[i] [li, ri, va…...

编程日记 2025/7/1 23:08:07

Docker网关冲突导致容器启动网络异常解决方案

一、故障现象执行docker-compose up命令时服务器网络中断控制台显示"Creating network xxxxxxx with the default driver"通过ifconfig可见docker0网卡docker network ls显示新创建的网络接口二、根本原因 Docker服务默认创建docker0虚拟网卡（默认地…...

编程日记 2025/7/1 23:01:47

基于stm32的空气质量监测系统

目录摘要 Abstract 目录第 1 章绪论第 2 章空气质量监测系统总体方案设计第3章硬件的部分介绍 3.1 硬件系统的的原理方框图 3.2 硬件系统的的原理图 3.3 温湿度传感器 3.4 甲醛传感器 3.5 报警提醒模块及其他 3.6 系统工作原理 3.7 本章小结第四章方案…...

编程日记 2025/6/27 23:19:07

Leetcode-3 判断根结点是否等于子结点之和

Leetcode-3 判断根结点是否等于子结点之和（简单） 题目描述思路分析通过代码（python） 题目描述 **给你一个二叉树的根结点 root，该二叉树由恰好 3 个结点组成：根结点、左子结点和右子结点。如果根结点值…...

编程日记 2025/6/27 22:59:37

《算法笔记》12.1小节——字符串专题-＞字符串hash进阶问题 A: 求最长公共子串（串）

题目描述求采用顺序结构存储的串s和串t的一个最长公共子串，若没有则输出false，若最长的有多个则输出最先出现的那一串。输入输入两个字符串输出输出公共子串样例输入 abcdef adbcef 样例输出 bc 分析：用字符串哈希解决。检查…...

编程日记 2025/6/26 23:26:22

为何天线的长度设计为频率波长的四分之一？

目录 1. 电磁波的波长与频率关系 2. 四分之一波长天线的工作原理 3. 为什么选择 λ/4 而不是其他长度？ 4. 实际应用中的例子 5. 总结为何天线的长度设计为频率波长的四分之一？ 天线的长度设置为频率波长的四分之一主要是基于电磁波的传播特性以及天线的…...

编程日记 2025/6/27 23:37:48

端口号详解（技术向）

端口号详解（技术向） 一、核心定义 **端口号（Port Number）**是传输层协议（TCP/UDP） 的逻辑标识，用于在同一设备上区分不同应用程序的网络通信入口。端口号是用两个字节（无符号&…...

编程日记 2025/6/29 23:52:56

git合并多次commit提交

首先查看历史记录 git log 查看你想要合并的commit是哪些（注意：这里是逆序，最上的是最新提交） 找到当前想要合并的最后一个记录，复制该记录的下一个记录的 id（黄色部分commit id）&#xff0c…...

编程日记 2025/6/27 21:10:25

深入浅出Java-Lambda表达式

深入浅出Java-Lambda表达式一、Lambda 表达式特征二、Lambda 表达式的基础语法与结构2.1 基本语法格式2.2 语法简化规则2.3 与匿名内部类的对比三、函数式接口：Lambda 表达式的载体3.1 函数式接口的定义3.2 常用函数式接口分类3.2.1 消费型接口（Consum…...

编程日记 2025/6/27 23:39:11

FreeCAD傻瓜教程-外螺纹的绘制,利用两个实体进行布尔运算来实现

起因：因为要设计一个波珠螺丝固定器，为了不跑偏，需要在螺柱上加工一个直径6mm，深度1.2mm的圆弧凹槽所以想用泉州制造的6.8车铣加工。但是该加工目前不支持轴向的钻孔，所以想着干脆在两端加上M8的螺栓，也起…...

编程日记 2025/6/27 23:40:44

java并发-线程池

文章目录线程池定义组成工作参数设置种类关闭线程池定义线程池就是提前创建好一批线程，反复复用处理任务，避免频繁创建销毁线程，同时控制线程数量，让系统更高效、稳定。举个例子： 场景假设： 你开了…...

编程日记 2025/6/27 23:30:10

openlayer:06点击按钮实现地图动画移动

如何实现点击去辽宁按钮实现用动画效果将地图顺滑的切换到辽宁区域，点击回北京按钮后同样将地图使用动画效果移动回到辽宁。本文介绍了如何通过OpenLayers库实现地图在北京市和辽宁省之间的平滑切换动画。首先，使用View类设置地图的初始中心点为北京市…...

编程日记 2025/6/27 23:24:01

使用 Matter.js 创建封闭箱体与里面的小球

下面是一个使用 Matter.js 创建的示例，包含一个地面、由4个长方形组成的封闭箱体，箱体内有10个不同颜色的小球。箱体可以被拖动，而小球被限制在箱体内部。 <!DOCTYPE html> <html> <head><title>Matter.js 可拖动箱体与小球</title><styl…...

编程日记 2025/7/1 6:56:39

自动化软件如何确保高可用性和容错性？

在数字化转型的浪潮中，RPA（机器人流程自动化）技术成为众多企业和机构实现业务流程优化的得力助手。以金智维为例，作为 RPA 领域的佼佼者，其技术在金融、政务等行业广泛应用，承担着大量关键业务流程的自动化…...

编程日记 2025/6/27 23:25:10

变电站综合自动化系统

系统介绍 a安科瑞 18702112163 变电站综合自动化系统为企业变电站提供了完整的SCADA功能，包括主接线图、设备工况、实时数据显示、定值管理、SOE报警/记录/查询/打印、棒图、实时/历史曲线、语音报警、历史信息查询、用户权限管理、各种运行数据统计分析报表等。系…...

编程日记 2025/6/27 11:15:04

【2025.05】Anaconda新手安装+配置+环境创建教程

本文目录一、安装前述二、下载与安装1、下载2、选择安装类型3、选择安装路径： 三、设置环境1、添加conda目录到path2、修改envs\pgks默认目录第一种：修改.condarc文件第二种：使用conda config命令四、修改镜像源五、常用命令（27…...

编程日记 2025/6/27 23:05:28

React-改变当前页class默认的样式

比如antd for mobile，已经定义了默认的ui的class样式，如果想在当前页面的控件显示特殊的样式，除了指定style外，还可以强制改变默认class的样式，比如我想改变list.item的字体。在返回渲染布局里面加上 return (<&…...

编程日记 2025/6/27 23:29:17

腾讯游戏安全与高通合作构建PC端游安全新格局

导语：5月16日，2025游戏安全行业峰会在深圳举行，腾讯游戏安全ACE与高通（中国）在峰会上就腾讯游戏安全方案正式宣布达成行业生态合作。双方将依托高通技术公司专门面向AI PC打造的骁龙X系列平台，共同为《无畏…...

编程日记 2025/6/27 23:02:48

Token类型与用途详解：数字身份的安全载体图谱

在现代数字身份体系中，Token如同"数字DNA"，以不同形态流转于各类应用场景。根据Okta的最新研究报告，平均每个企业应用使用2.7种不同类型的Token实现身份验证和授权。本文将系统梳理主流Token类型及其应用场景，通过行业典…...

编程日记 2025/6/27 23:17:01

【Linux基础I/O】文件调用接口、文件描述符、重定向和缓冲区

【Linux基础I/O一】文件描述符和重定向 1.C语言的文件调用接口2.操作系统的文件调用接口2.1open接口2.2close接口2.3write接口2.4read接口 3.文件描述符fd的本质4.标准输入、输出、错误5.重定向5.1什么是重定向5.2输入重定向和输出重定向5.3系统调用的重定向dup2 6.缓冲区 1.C语…...

编程日记 2025/6/27 23:17:37

软考中级软件设计师——操作系统考试题型

一、PV操作与进程同步（必考大题） 1. 真题示例（2020年真题） 题目： 三个进程P1、P2、P3共享一个缓冲区，P1生产数据放入缓冲区，P2和P3消费数据。要求： 缓冲区大小为10，满时…...

编程日记 2025/6/27 23:18:15

transformer归一化层优化：深度解读 RMSNorm （Root Mean Square Layer Normalization，均方根层归一化）

导读：RMSNorm 把传统 LayerNorm 的“减均值（centering） 除标准差（scaling）”简化为“直接除以向量均方根 (Root Mean Square, RMS，均方根)”。这一改动让归一化既更省算又同样稳定，因而成为 …...

编程日记 2025/6/27 23:34:20

java基础之 Hash家族（一）

文章目录 HashCode定义代码使用使用场景 HashMap定义常用方法使用场景 ConcurrentHashMap定义常用方法使用场景 HashTable定义常用方法使用场景 HashSet定义常用方法使用场景你想到过吗？ HashMap、ConcurrentHashMap、HashTable的对比总结 HashCode 定义 hashcode是…...

编程日记 2025/6/27 22:52:18

windows服务器部署jenkins工具（二）

jenkins的大致流程：新增任务->配置任务->构建（打包）项目->部署（发布） 具体如何使用，我这里就不多讲了。这次就给大家讲讲，jenkins安装之后使用过程中存在的一些问题。 1.maven项目如…...

编程日记 2025/6/27 22:52:22

机器学习第二十讲：网格搜索 → 像尝试所有密码组合找最佳解锁方式

机器学习第二十讲：网格搜索 → 像尝试所有密码组合找最佳解锁方式资料取自《零基础学机器学习》。查看总目录：学习大纲关于DeepSeek本地部署指南可以看下我之前写的文章：DeepSeek R1本地与线上满血版部署：超详细手把手指南网…...

编程日记 2025/6/27 23:14:28

【人工智能发展史】从黎明到曙光01

人工智能的史诗：从黎明到曙光序曲：晨曦微露故事的序幕拉开于一个思想激荡的年代，1956年，达特茅斯会议的钟声，如同第一缕晨曦，宣告了"人工智能"纪元的到来。那个夏天，在新罕布什尔…...

编程日记 2025/6/29 20:01:16

ollama使用gpu运行大模型

罗列ollma镜像 ollama list拉取ollama镜像源里面的模型： ollama pull qwen2:1.5b下载CudaToolkit https://developer.nvidia.com/cuda-toolkit-archive 我这里选择11.7的万金油版本，从来没出过bug Ollama安装好后，为了让推理跑在GPU上&am…...

编程日记 2025/6/27 23:32:50

Linux电源管理——PSCI初始化流程和多核启动流程

目录一、PSCI 初始化流程 1、PSCI设备树节点 2、PSCI kernel初始化流程 get_set_conduit_method set_conduit psci_probe 二、CPU PSCI 操作初始化流程 1、CPU 设备树节点 2、 struct cpu_operations 3、kernel 流程 cpu_read_bootcpu_ops smp_init_cpus 三、CPU…...

编程日记 2025/6/27 23:04:33

Linux问题排查-引起服务器带宽使用率高的内鬼

Linux网络流量监控与瓶颈分析全攻略：从基础命令到进程级方案一、网络带宽查询与实时流量监控 1. 查询主机网络带宽网卡理论带宽通过ethtool命令查看网卡最大支持速率，例如： ethtool eth0 # 替换为实际网卡名（如ens33&#x…...

编程日记 2025/6/27 23:31:12

《微服务架构设计模式》笔记

思维导图 1-3章 4-6 章 5-13 章资料配套代码仓库：https://github.com/microservices-patterns/ftgo-application 作者网站：https://microservices.io/...

编程日记 2025/6/27 22:52:21

基于JDBC的信息管理系统，那么什么是JDBC呢？

JDBC 即 Java Database Connectivity，是 Java 语言中用于与数据库进行交互的一套 API。它提供了一种标准的方式，让 Java 程序能够连接到各种不同类型的数据库，并执行 SQL 语句来实现对数据库的查询、插入、更新和删除等操作。主要功能建立…...

编程日记 2025/6/27 23:20:14

百度地图的地铁图API所有城市的城市名和citycode的对照关系列表

百度地图的地铁图API所有城市的城市名和citycode的对照关系列表城市keywordcitycode北京beijing131上海shanghai289广州guangzhou257深圳shenzhen340重庆chongqing132天津tianjin332石家庄shijiazhuang150南京nanjing315成都chengdu75沈阳shenyang58杭州hangzhou179武汉wuhan2…...

编程日记 2025/6/27 22:53:12

信息学奥赛一本通 1853：【08NOIP提高组】传纸条 | 洛谷 P1006 [NOIP 2008 提高组] 传纸条

【题目链接】 ybt 1853：【08NOIP提高组】传纸条洛谷 P1006 [NOIP 2008 提高组] 传纸条【题目考点】 1. 动态规划：坐标型动态规划【解题思路】抽象问题，存在m乘n的网格，每个格子中有一个数值，即同学愿意帮忙的…...

编程日记 2025/6/27 22:52:28

APM32小系统键盘PCB原理图设计详解

APM32小系统键盘PCB原理图设计详解一、APM32小系统简介 APM32微控制器是国内半导体厂商推出的一款高性能ARM Cortex-M3内核微控制器，与STM32高度兼容，非常适合DIY爱好者用于自制键盘、开发板等电子项目。本文将详细讲解如何基于APM32 CBT6芯片设计一款…...

编程日记 2025/6/30 20:35:23

【Linux我做主】探秘进程与fork

进程和fork 父子进程和forkgithub地址前言1. 进程的标识符PID1.1 查看系统内所有的进程1.2 kill杀掉进程1.3 获取进程的PID1.4 bash与父子进程 2. 创建进程与fork2.1 fork创建子进程2.2 fork困惑的解释0. fork的工作原理1. 为什么给子进程返回0，给父进程返回子进程P…...

编程日记 2025/6/27 23:21:38

学习python day4

1.顺序语句结构 #赋值语句 name张三 age20 a,b,c,droom#字符串分解赋值 print(a,b,c,d) #输入输出也是典型的顺序结构 nameinput(请输入您的姓名：) ageeval(input(请输入您的年龄：)) #使用eval进行转换 print(姓名：,name) print(年龄&#x…...

编程日记 2025/6/30 9:57:15

如何通过外链建设提升Shopify独立站的权重和排名

一、外链质量评估与筛选原则相关性优先选择与自身行业、产品或目标用户群体高度相关的网站（如行业论坛、垂直媒体、评测博客）交换外链，避免低相关性垃圾链接导致搜索引擎惩罚。权威性指标关注外链来源网站的域名权威（DA…...

编程日记 2025/6/27 23:22:27

高并发内存池|六、page cache的设计

六、page cache的设计 1. page cache的结构 page cache 也是一个哈希桶结构，但它的映射结构与前两个 cache 不同。它的每一个桶是容量从 1 到 128 页大小的内存块，桶中的每个内存块由 SpanList 管理。page cache 的内存由其向系统申请所得，…...

编程日记 2025/6/29 2:24:33

C++线程池实现

C线程池实现知识点补充为什么要实现线程池线程池的实现过程知识点补充在C11中引入了对线程库的支持，接下来我们介绍一下跟线程相关的一些知识点： 线程对象的构造方式在C11中主要提供的三种线程的构造方式：无参构造、带参构造和调用移动构…...

编程日记 2025/6/27 22:53:15

#Redis缓存篇#（七）分布式缓存

目录一单节点Redis 1 单节点的问题二分布式缓存 1 Redis持久化 （1 RDB持久化 （2 AOF持久化 2 Redis主从集群 （1 搭建主从架构 （2 主从数据同步原理 3 Redis哨兵 （1 哨兵的作用和原理 （2 搭…...

编程日记 2025/6/29 2:03:04

【VSCode】安装与 ssh 免密登录

【VSCode】安装与 ssh 免密登录下载SSH 登录设置免密登录关闭远程连接删除ssh连接（慎用！！！删除了建立的连接就没有了！！） 下载 https://code.visualstudio.com/docs/?dvwin64user 选择安装路径…...

编程日记 2025/6/27 23:29:38

【Python解决八皇后问题】回溯算法与优化策略全解析

目录 🌟 前言🏗️ 技术背景与价值🩹 当前技术痛点🛠️ 解决方案概述👥 目标读者说明🧠 一、技术原理剖析📊 核心概念图解💡 核心作用讲解🔧 关键技术模块说明⚖️ 技术选型对比🛠️ 二、实战演示⚙️ 环境配置要求💻 核心代码实现基础回溯实现位运算优化…...

编程日记 2025/6/27 13:41:45

判断一个元素是否在可视区域

判断元素是否在可视区域的方法方法一：offsetTop 和 scrollTop 通过计算元素的 offsetTop 和容器的 scrollTop 来判断元素是否位于视口内。这种方法适用于简单的垂直滚动场景。优点: 实现简单，性能较好。缺点: 不支持复杂的布局结构（如嵌套滚动），无法处理水平方向上的可…...

编程日记 2025/6/30 9:27:22

作物遗传与种质创新利用全国重点实验室-随笔10

作物遗传与种质创新利用全国重点实验室依托于南京农业大学，2022年11月完成国家重点实验室重组工作，由原名称“作物遗传与种质创新国家重点实验室”正式更名为“作物遗传与种质创新利用全国重点实验室”。实验室面向国家粮食安全和农业高质量发展的重大战…...

编程日记 2025/6/26 23:09:28

分布式电源的配电网无功优化

分布式电源（Distributed Generation, DG）的大规模接入配电网，改变了传统单向潮流模式，导致电压波动、功率因数降低、网损增加等问题，无功优化成为保障配电网安全、经济、高效运行的关键技术。 1. 核心目标电压稳定性：抑制DG并网点（PCC）及敏感节点的电压越限（如超过5%…...

编程日记 2025/6/27 23:38:09

游戏引擎学习第301天:使用精灵边界进行排序

回顾并为今天的内容做准备昨天，我们解决了一些关于排序的问题，这对我们清理长期存在的Z轴排序问题很有帮助。这个问题我们一直想在开始常规游戏代码之前解决。虽然不确定是否完全解决了问题，但我们提出了一个看起来合理的排序标准。有两点…...

编程日记 2025/6/30 20:09:37

相关文章：