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

three.js用粒子使用canvas生成的中文字符位图材质

news 来源：原创 2025/5/22 6:19:51

three.js用粒子使用canvas生成中文字符材质

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Three.js Canvas 文字粒子</title><style>body { margin: 0; }canvas { display: block; }</style>
</head>
<body><script type="importmap">{"imports": {"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/","three/addons/geometries/TextGeometry.js": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/geometries/TextGeometry.js","three/addons/loaders/FontLoader.js": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/loaders/FontLoader.js"}}</script><script type="module">import * as THREE from 'three';//--------------------------------------//需要显示的文字let textDisplayed = "新年好";// 创建场景、相机和渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 设置相机位置camera.position.z = 50;// 创建 Canvas 纹理function createCanvasTexture(text) {const canvas = document.createElement('canvas');const context = canvas.getContext('2d');const size = 300; // Canvas 大小canvas.width = size;canvas.height = size;// 绘制背景context.fillStyle = 'rgba(0, 0, 0, 0)'; // 透明背景context.fillRect(0, 0, size, size);// 绘制文字context.font = '100px Arial';context.fillStyle = 'gold';context.textAlign = 'center';context.textBaseline = 'middle';context.fillText(text, size / 2, size / 2);// 将 Canvas 转换为纹理return new THREE.CanvasTexture(canvas);}// 创建粒子系统const particles = [];const particleCount = 100;const geometry = new THREE.BufferGeometry();const positions = [];for (let i = 0; i < particleCount; i++) {// 随机位置positions.push((Math.random() - 0.5) * 100, (Math.random() - 0.5) * 100, (Math.random() - 0.5) * 100);}geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));// 创建粒子材质const texture = createCanvasTexture(textDisplayed);const material = new THREE.PointsMaterial({size: 10,map: texture, transparent: true,alphaTest: 0.5});const particleSystem = new THREE.Points(geometry, material);scene.add(particleSystem);// 动画循环let angle = 0;const radius = 80; // 相机绕场景中心旋转的半径renderer.setClearColor(0xff0000, 0.5); function animate() {requestAnimationFrame(animate);angle += 0.01;camera.position.x = radius * Math.cos(angle);camera.position.z = radius * Math.sin(angle);camera.lookAt(scene.position);renderer.render(scene, camera);}animate();</script>
</body>
</html>

three.js用粒子使用canvas生成的中文字符位图材质

three.js用粒子使用canvas生成中文字符材质 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Three.…...

编程日记 2025/5/22 6:19:51

数据结构与算法之堆: LeetCode 208. 实现 Trie (前缀树) (Ts版)

实现 Trie (前缀树) https://leetcode.cn/problems/implement-trie-prefix-tree/description/ 描述 Trie（发音类似 “try”）或者说前缀树是一种树形数据结构，用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&am…...

编程日记 2025/5/23 1:34:40

在 Linux 中使用 nslookup命令

什么是 nslookup? nslookup 命令是名称服务器查找的缩写，是一种网络管理工具，用于获取域名的 IP 地址或其他 DNS 记录信息，通常用于解决 DNS 或名称解析问题 nslookup一般语法，<domain-name>是您要查询的域名&#xff0c…...

编程日记 2025/5/23 2:48:07

【Numpy核心编程攻略：Python数据处理、分析详解与科学计算】1.1 从零搭建NumPy环境：安装指南与初体验

1. 从零搭建NumPy环境：安装指南与初体验 NumPy核心能力图解（架构图） NumPy 是 Python 中用于科学计算的核心库，它提供了高效的多维数组对象以及用于处理这些数组的各种操作。NumPy 的核心能力可以概括为以下几个方面&#xff1a…...

编程日记 2025/5/20 7:51:51

PHP校园助手系统小程序

🔑 校园助手系统 —— 智慧校园生活 📱一款基于ThinkPHPUniapp框架深度定制的校园助手系统，犹如一把智慧之钥，专为校园团队精心打造，解锁智慧校园生活的无限精彩。它独家适配微信小程序，无需繁琐的下载与安…...

编程日记 2025/5/23 2:09:56

2_高并发内存池_各层级的框架设计及ThreadCache（线程缓存）申请内存设计

一、高并发内存池框架设计高并发池框架设计，特别是针对内存池的设计，需要充分考虑多线程环境下： 性能问题锁竞争问题内存碎片问题高并发内存池的整体框架设计旨在提高内存的申请和释放效率，减少锁竞争和内存碎片。高并发内存…...

编程日记 2025/5/22 8:39:03

在线可编辑Excel

1. Handsontable 特点： 提供了类似 Excel 的表格编辑体验，包括单元格样式、公式计算、数据验证等功能。支持多种插件，如筛选、排序、合并单元格等。轻量级且易于集成到现有项目中。具备强大的自定义能力，可以调整外观和行为…...

编程日记 2025/5/23 2:20:02

物业管理系统源码优化物业运营模式实现服务智能化与品质飞跃

内容概要在当今快速发展且竞争激烈的市场环境中，物业管理面临着众多挑战，而“物业管理系统源码”的优化，无疑为解决这些问题提供了有效的途径。这些优化不仅提升了物业管理的效率，还实现了服务智能化，推动了物业运营…...

编程日记 2025/5/23 2:49:51

双足机器人开源项目

双足机器人（也称为人形机器人或仿人机器人）是一个复杂的领域，涉及机械设计、电子工程、控制理论、计算机视觉等多个学科。对于想要探索或开发双足机器人的开发者来说，有许多开源项目可以提供帮助。这些项目通常包括硬件设计文件、…...

编程日记 2025/5/19 18:21:30

第五部分：Linux中的gcc/g++以及gdb和makefile

目录 1、编译器gcc和g 1.1、预处理（进行宏替换) 1.2、编译（生成汇编) 1.3、汇编（生成机器可识别代码） 1.4、连接（生成可执行文件或库文件） 1.5、gcc编译器的使用 2、Linux调试器-gdb使用 2.1、debug…...

编程日记 2025/5/23 3:02:28

decison tree 决策树

熵信息增益信息增益描述的是在分叉过程中获得的熵减，信息增益即熵减。熵减可以用来决定什么时候停止分叉，当熵减很小的时候你只是在不必要的增加树的深度，并且冒着过拟合的风险决策树训练(构建)过程离散值特征处理：One-Hot…...

编程日记 2025/5/23 2:37:18

GPU算力平台|在GPU算力平台部署AI虚拟换衣模型(CatVTON)的应用实战教程

文章目录一、GPU算力服务平台概述智能资源分配优化的Kubernetes架构按需计费安全保障平台特色功能二、平台账号注册流程AI虚拟换衣模型(CatVTON)的应用实战教程AI虚拟换衣模型(CatVTON)的介绍AI虚拟换衣模型(CatVTON)的部署步骤一、GPU算力服务平台概述蓝耘GPU算力平台专为…...

编程日记 2025/5/18 12:56:36

使用云服务器自建Zotero同步的WebDAV服务教程

Zotero 是一款广受欢迎的文献管理软件，其同步功能可以通过 WebDAV 实现文献附件的同步。相比 Zotero 官方提供的300MB免费存储服务，自建 WebDAV 服务具有存储空间大、成本低以及完全控制数据的优势。本文将详细介绍如何使用云服务器自建 WebDAV 服务&…...

编程日记 2025/5/18 7:11:58

单片机基础模块学习——按键

一、按键原理图当把跳线帽J5放在右侧，属于独立按键模式（BTN模式），放在左侧为矩阵键盘模式（KBD模式） 整体结构是一端接地，一端接控制引脚之前提到的都是使用了GPIO-准双向口的输出功能&#x…...

编程日记 2025/5/19 3:34:21

FlinkSql使用中rank/dense_rank函数报错空指针

问题描述在flink1.16(甚至以前的版本)中，使用rank()或者dense_rank()进行排序时，某些场景会导致报错空指针NPE(NullPointerError) 报错内容如下该报错没有行号/错误位置，无法排查现状目前已经确认为bug，根据github上的PR日…...

编程日记 2025/5/23 2:13:28

WPF基础 | WPF 基础概念全解析：布局、控件与事件

WPF基础 | WPF 基础概念全解析：布局、控件与事件一、前言二、WPF 布局系统2.1 布局的重要性与基本原理2.2 常见布局面板2.3 布局的测量与排列过程三、WPF 控件3.1 控件概述与分类3.2 常见控件的属性、方法与事件3.3 自定义控件四、WPF 事件4.1 路由事件概述4.2 事…...

编程日记 2025/5/23 2:02:05

【AIGC学习笔记】扣子平台——精选有趣应用，探索无限可能

背景介绍： 由于近期业务发展的需求，我开始接触并深入了解了扣子平台的相关知识，并且通过官方教程自学了简易PE工作流搭建的技巧。恰逢周会需要准备与工作相关的分享主题，而我作为一个扣子平台的初学者，也想探索一下这…...

编程日记 2025/5/23 2:53:15

mock可视化生成前端代码

介绍：mock是我们前后端分离的必要一环、ts、axios编写起来也很麻烦。我们就可以使用以下插件，来解决我们的问题。目前支持vite和webpack。（配置超级简单！） 欢迎小伙伴们提issues、我们共建。提升我们的开发体验。 vi…...

编程日记 2025/5/23 2:15:20

csapp2.4节——浮点数

目录二进制小数十进制小数转二进制小数 IEEE浮点表示规格化表示非规格化表示特殊值舍入浮点运算二进制小数类比十进制中的小数，可定义出二进制小数例如1010.0101 小数点后的权重从-1开始递减。十进制小数转二进制小数整数部分使用辗转相除…...

编程日记 2025/5/22 2:08:37

Java面试题2025-Spring

讲师：邓澎波 Spring面试专题 1.Spring应该很熟悉吧？来介绍下你的Spring的理解 1.1 Spring的发展历程先介绍Spring是怎么来的，发展中有哪些核心的节点，当前的最新版本是什么等通过上图可以比较清晰的看到Spring的各个时间版本对…...

编程日记 2025/5/22 21:24:28

element tbas增加下拉框

使用Tabs 标签页的label插槽，嵌入Dropdown 下拉菜单，实现Tabs 标签页增加下拉切换功能 Tabs 标签页 tab-click"事件"（这个事件当中到拥有下拉框的tab里时，可以存一下Dropdown 第一个菜单的id，实现点击到拥有…...

编程日记 2025/5/22 17:46:47

Windows Defender添加排除项无权限的解决方法

目录起因Windows Defender添加排除项无权限通过管理员终端添加排除项管理员身份运行打开PowerShell添加/移除排除项的命令起因博主在打软件补丁时，遇到 Windows Defender 一直拦截并删除文件，而在 Windows Defender 中无权限访问排除项。尝试通过管理…...

编程日记 2025/5/23 2:32:23

Git上传了秘钥如何彻底修改包括历史记录【从安装到实战详细版】

使用 BFG Repo-Cleaner 清除 Git 仓库中的敏感信息 1. 背景介绍在使用 Git 进行版本控制时，有时会不小心将敏感信息（如 API 密钥、密码等）提交到仓库中。即使后续删除，这些信息仍然存在于 Git 的历史记录中。本文将介绍如何使用…...

编程日记 2025/5/22 19:42:32

贪心专题----

看了讲解，贪心似乎没有定式的解题方法，更多是按照常识来； 455. 分发饼干将胃口和饼干尺寸都排序； 然后遍历胃口，从饼干尺寸的最后一个开始。这里为什么是遍历胃口？ 当胃口大于饼干尺寸，…...

编程日记 2025/5/23 2:25:33

YOLOv8改进，YOLOv8检测头融合DynamicHead，并添加小目标检测层（四头检测），适合目标检测、分割等，全网独发

摘要作者提出一种新的检测头，称为“动态头”，旨在将尺度感知、空间感知和任务感知统一在一起。如果我们将骨干网络的输出（即检测头的输入）视为一个三维张量，其维度为级别空间通道，这样的统一检测头可以看作是一个注意力学习问题，直观的解决方案是对该张量进行全自…...

编程日记 2025/5/23 1:32:27

LabVIEW项目中的工控机与普通电脑选择

工控机（Industrial PC）与普通电脑在硬件设计、性能要求、稳定性、环境适应性等方面存在显著差异。了解这些区别对于在LabVIEW项目中选择合适的硬件至关重要。下面将详细分析这两种设备的主要差异，并为LabVIEW项目中的选择提供指导。硬件设…...

编程日记 2025/5/18 22:21:45

AI赋能医疗：智慧医疗系统源码与互联网医院APP的核心技术剖析

本篇文章，笔者将深入剖析智慧医疗系统的源码架构以及互联网医院APP背后的核心技术，探讨其在医疗行业中的应用价值。一、智慧医疗系统的核心架构智慧医疗系统是一个高度集成的信息化平台，主要涵盖数据采集、智能分析、决策支持、远程医疗等…...

编程日记 2025/5/23 2:46:07

一文详解Filter类源码和应用

背景在日常开发中，经常会有需要统一对请求做一些处理，常见的比如记录日志、权限安全控制、响应处理等。此时，ServletApi中的Filter类，就可以很方便的实现上述效果。 Filter类是一个接口，属于 Java Servlet API 的一部…...

编程日记 2025/5/20 17:46:50

Spring Boot - 数据库集成03 - 集成Mybatis

Spring boot集成Mybatis 文章目录 Spring boot集成Mybatis一：基础知识1：什么是MyBatis2：为什么说MyBatis是半自动ORM3：MyBatis栈技术演进3.1：JDBC，自行封装JDBCUtil3.2：IBatis3.3：My…...

编程日记 2025/5/17 11:26:13

力扣算法题——202.快乐数【系统讲解】

目录 💕1.题目 💕2.解析思路本题思路总览借助 “环” 的概念探索规律从规律到代码实现的转化快慢指针的具体实现代码整体流程 💕3.代码实现 💕4.完结二十七步也能走完逆流河吗 💕1.题目 💕2.解…...

编程日记 2025/5/18 20:49:10

求阶乘（信息学奥赛一本通-2019）

【题目描述】利用for循环求n!的值。提示，n!12...n。【输入】输入一个正整数n。【输出】输出n!的值。【输入样例】 4 【输出样例】 24 【提示】【数据规模及约定】对于所有数据，1≤n≤20。【题解代码】 #include<iostream> using namesp…...

编程日记 2025/5/22 16:08:59

【含代码】逆向获取 webpack chunk 下的__webpack_require__ 函数，获悉所有的模块以及模块下的函数

背景 Webpack 打包后的代码是不会直接暴露 __webpack_require__ 函数，目的是为了避免污染全局变量同时也为了保护 webpack 的打包后的模块都隐藏在闭包函数里，达到数据的安全性。而有时我们为了测试某个函数，想直接获取这个内置函数&#…...

编程日记 2025/5/18 1:28:19

目录 hunyuan3d 2 stable-point-aware-3d hunyuan3d 2 https://github.com/Tencent/Hunyuan3D-2/tree/main/hy3dgen stable-point-aware-3d GitHub - Stability-AI/stable-point-aware-3d: SPAR3D: Stable Point-Aware Reconstruction of 3D Objects from Single Images...

编程日记 2025/5/21 21:02:42

WebSocket 心跳机制：确保连接稳定与实时性

目录前言什么是 WebSocket 心跳机制？ WebSocket 心跳机制的实现关键代码如下： WebSocket 心跳机制的应用场景 WebSocket 心跳机制的优势 WebSocket 心跳机制的注意事项前言 WebSocket 是一种基于持久连接的协议，它支持全双工通信&…...

编程日记 2025/5/22 16:12:48

[SUCTF 2018]MultiSQL1

进去题目页面如下发现可能注入点只有登录和注册,那么我们先注册一个用户，发现跳转到了/user/user.php， 查看用户信息,发现有传参/user/user.php?id1 用?id1 and 11,和?id1 and 12,判断为数字型注入原本以为是简单的数字型注入，看到大…...

编程日记 2025/5/19 4:03:36

数据结构——AVL树的实现

Hello，大家好，这一篇博客我们来讲解一下数据结构中的AVL树这一部分的内容，AVL树属于是数据结构的一部分，顾名思义，AVL树是一棵特殊的搜索二叉树，我们接下来要讲的这篇博客是建立在了解搜索二叉树这个知识点…...

编程日记 2025/5/19 8:57:16

Kubernetes可视化界面

DashBoard Kubernetes Dashboard 是 Kubernetes 集群的一个开箱即用的 Web UI，提供了一种图形化的方式来管理和监视 Kubernetes 集群中的资源。它允许用户直接在浏览器中执行许多常见的 Kubernetes 管理任务，如部署应用、监控应用状态、执行故障排查以及…...

编程日记 2025/5/20 2:35:07

flutter_学习记录_00_环境搭建

1.参考文档 Mac端Flutter的环境配置看这一篇就够了 flutter的中文官方文档 2. 本人环境搭建的背景本人的电脑的是Mac的，iOS开发，所以iOS开发环境本身是可用的；外加Mac电脑本身就会配置Java的环境。所以，后面剩下的就是&#x…...

编程日记 2025/5/22 1:43:05

【React】PureComponent 和 Component 的区别

前言在 React 中，PureComponent 和 Component 都是用于创建组件的基类，但它们有一个主要的区别：PureComponent 会给类组件默认加一个shouldComponentUpdate周期函数。在此周期函数中，它对props 和 state (新老的属性/状态)会做一…...

编程日记 2025/5/17 17:07:44

vim如何设置制表符表示的空格数量

:set tabstop4 设置制表符表示的空格数量制表符就是tab键，一般默认是四个空格的数量示例： （vim如何使设置制表符表示的空格数量永久生效：vim如何使相关设置永久生效-CSDN博客）...

编程日记 2025/5/8 7:50:57

Python中程序流程的控制

本篇我们将介绍程序流程控制方面的内容，了解如何控制程序的流程，使得程序具有“判断能力”, 能够像人脑一样分析问题。在Python中，程序流程的控制主要通过以下几种方式实现： 分支语句前言：我很熟悉分支语句&#xf…...

编程日记 2025/5/19 14:30:00

基于聚类与相关性分析对马来西亚房价数据进行分析

碎碎念：由于最近太忙了，更新的比较慢，提前祝大家新春快乐，万事如意！本数据集的下载地址，读者可以自行下载。 1.项目背景本项目旨在对马来西亚房地产市场进行初步的数据分析，探索各州的房产市…...

编程日记 2025/5/22 23:00:03

【例51.3】平移数据

题目描述将a数组中第一个元素移到数组末尾,其余数据依次往前平移一个位置。输入第一行为数组a的元素个数； 第二行为n个小于1000的正整数。输出平移后的数组元素，每个数用一个空格隔开。样例输入复制 10 1 2 3 4 5 6 7 8 9 10 样例输出复…...

编程日记 2025/5/18 9:54:51

【unity游戏开发之InputSystem——02】InputAction的使用介绍（基于unity6开发介绍）

文章目录前言一、InputAction简介1、InputAction是什么？2、示例二、监听事件started 、performed 、canceled1、启用输入检测2、操作监听相关3、关键参数 CallbackContext4、结果三、InputAction参数相关1、点击齿轮1.1 Actions 动作（1）动…...

编程日记 2025/5/20 8:33:48

Alfresco Content Services docker自动化部署操作

Alfresco Content Services docker部署文档前提条件在开始之前，需要确保已经安装了 Docker 和 Docker Compose。Docker 用于创建和管理容器，Docker Compose 则用于定义和运行多容器的 Docker 应用。步骤 1. 创建目录结构首先，创建一个…...

编程日记 2025/5/21 7:47:48

侧边导航（Semi Design）

根据前几次的导航栏设计，从最简单的三行导航栏到后面响应式的导航栏，其实可以在这个的基础上慢慢优化，就可以得到一个日常使用设计的导航栏。设计步骤也和之前的类似。一、实现步骤 1、先下载安装好npm install douyinfe/semi-icons 2、引…...

编程日记 2025/5/22 13:34:42

Ubuntu下让matplotlib显示中文字体

文章目录安装中文字体显示matplotlib库的字体文件夹删除matplotlib 的缓存文件（可选） matplotlib中设置字体，显示！ 参考文章： https://zodiac911.github.io/blog/matplotlib-chinese.html Ubuntu下python的matplotli…...

编程日记 2025/5/22 14:39:23

Linux 磁盘管理

Linux 磁盘管理引言磁盘管理是操作系统管理中的一项重要内容，对于Linux系统而言，磁盘管理更是基础中的基础。随着数据量的不断增加，合理地管理和利用磁盘资源显得尤为重要。本文将详细介绍Linux磁盘管理的基本概念、工具和策略，旨在帮助Linux用户和系统管理员更好地掌握…...

编程日记 2025/5/21 20:45:13

解决CentOS9系统下Zabbix 7.2图形中文字符乱码问题

操作系统：CentOS 9 Zabbix版本：Zabbix7.2 问题描述：主机图形中文字符乱码解决方案： # 安装字体配置和中文语言包 sudo yum install -y fontconfig langpacks-zh_CN.noarch # 检查是否已有中文字体： fc-list :lan…...

编程日记 2025/5/22 4:28:27

Spring MVC (三) —— 实战演练

项目设计我们会将前端的代码放入 static 包下： 高内聚，低耦合这是我们在实现项目的设计思想，一个项目里存在很多个模块，每一个模块内部的要求类与类、方法与方法要相互配合紧密联系，这就是高内聚，低耦合…...

编程日记 2025/5/22 0:35:59

相关文章：