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

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>

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

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

相关文章

Kubernetes 环境中的自动化运维实战指南

Kubernetes 作为容器编排领域的领导者,已经成为云原生应用的核心基础设施。然而,随着集群规模的扩大和应用的复杂化,手动运维 Kubernetes 集群变得愈发困难。自动化运维成为提升效率、保障系统稳定性的关键。本文将详细介绍如何在 Kubernetes 环境中实施自动化运维,涵盖工具…

STM32 PWM驱动直流电机

接线图&#xff1a; 代码配置&#xff1a; 根据驱动舵机的代码来写&#xff0c;与舵机不同的是&#xff0c;这次的引脚接到了PA2上&#xff0c;所以需要改一下引脚以及改为OC3通道。 另外还需在配置两个GPIO引脚&#xff0c;来控制电机的旋转方向&#xff0c;这里连接到了PA4与…

7.线程的基本概念

7.线程的基本概念 **1. 线程的基本概念****2. 线程与进程的区别****3. 线程的创建与回收****4. 线程的参数传递与返回值****5. 线程的分离属性****6. 线程的清理函数****7. 线程与进程的对比****8. 练习与作业****9. 总结** 1. 线程的基本概念 线程&#xff1a;线程是轻量级进…

【外文原版书阅读】《机器学习前置知识》2.用看电影推荐的例子带你深入了解向量点积在机器学习的作用

目录 3.3 Where Are You Looking, Vector? The Dot Product 个人主页&#xff1a;Icomi 大家好&#xff0c;我是Icomi&#xff0c;本专栏是我阅读外文原版书《Before Machine Learning》对于文章中我认为能够增进线性代数与机器学习之间的理解的内容的一个输出&#xff0c;希望…

拼车(1094)

1094. 拼车 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a; class Solution { public:bool carPooling(vector<vector<int>>& trips, int capacity) {uint32_t passenger_cnt 0;//将原数据按照from排序auto func_0 [](vector<int> & …

Conditional DETR for Fast Training Convergence论文学习

1. 写作背景 最近提出的 DETR 成功地将 transformer 引入到物体检测任务中&#xff0c;获得了很不错的性能。DETR 的重要意义在于去除了物体检测算法里需要人工设计的部分&#xff0c;比如 anchor 的生成和 NMS 操作。这大大简化了物体检测的设计流程。基本的结构还是沿用了以…

低代码产品表单渲染架构

在React和Vue没有流行起来的时候&#xff0c;低代码产品的表单渲染设计通常会使用操作Dom的方式实现。 下面是一个表单的例子&#xff1a; 产品层 用户通过打开表单&#xff0c;使用不同业务场景业务下的表单页面&#xff0c;中间的Render层就是技术实现。 每一个不同业务的表单…

XSS 漏洞全面解析:原理、危害与防范

目录 前言​编辑 漏洞原理 XSS 漏洞的危害 检测 XSS 漏洞的方法 防范 XSS 漏洞的措施 前言 在网络安全的复杂版图中&#xff0c;XSS 漏洞&#xff0c;即跨站脚本攻击&#xff08;Cross - Site Scripting&#xff09;&#xff0c;是一类极为普遍且威胁巨大的安全隐患。随着互…

Java 知识速记:全面解析 final 关键字

Java 知识速记&#xff1a;全面解析 final 关键字 什么是 final 关键字&#xff1f; final 关键字是 Java 中的一个修饰符。它可以用于类、方法和变量&#xff0c;其作用是限制对这些元素的修改。究竟如何限制&#xff1f;我们来逐个分析。 final 在变量中的用法 1. 声明常…

拒绝 Github 投毒,通过 Sharp4SuoBrowser 分析 Visual Studio 隐藏文件

近期的网络安全事件中&#xff0c;某提权工具被发现植入后门&#xff0c;攻击者使用 .suo 文件作为隐蔽攻击媒介。由于 .suo 文件是项目的隐藏配置文件&#xff0c;安全研究人员很少关注它的内容。 此次攻击事件被初步判断为东南亚地区的 APT 组织——海莲花&#xff08;Lotus…

shiro学习五:使用springboot整合shiro。在前面学习四的基础上,增加shiro的缓存机制,源码讲解:认证缓存、授权缓存。

文章目录 前言1. 直接上代码最后在讲解1.1 新增的pom依赖1.2 RedisCache.java1.3 RedisCacheManager.java1.4 jwt的三个类1.5 ShiroConfig.java新增Bean 2. 源码讲解。2.1 shiro 缓存的代码流程。2.2 缓存流程2.2.1 认证和授权简述2.2.2 AuthenticatingRealm.getAuthentication…

Edge-TTS在广电系统中的语音合成技术的创新应用

Edge-TTS在广电系统中的语音合成技术的创新应用 作者&#xff1a;本人是一名县级融媒体中心的工程师&#xff0c;多年来一直坚持学习、提升自己。喜欢Python编程、人工智能、网络安全等多领域的技术。 摘要 随着人工智能技术的快速发展&#xff0c;文字转语音&#xff08;Te…

python3+TensorFlow 2.x(二) 回归模型

目录 回归算法 1、线性回归 (Linear Regression) 一元线性回归举例 2、非线性回归 3、回归分类 回归算法 回归算法用于预测连续的数值输出。回归分析的目标是建立一个模型&#xff0c;以便根据输入特征预测目标变量&#xff0c;在使用 TensorFlow 2.x 实现线性回归模型时&…

HarmonyOS应用开发快速入门

本节内容将帮助开发者学习如何构建一个全新的HarmonyOS应用&#xff0c;学习使用DevEco Studio创建新项目、使用预览器预览页面、了解基础组件如Image、Text等。 文章目录 一、介绍二、创建一个新项目三、页面结构总览四、自定义文本视图五、创建Image组件 一、介绍 根据本教程…

高级编码参数

1.跳帧机制 参考资料&#xff1a;frameskipping-hotedgevideo 跳帧机制用于优化视频质量和编码效率。它通过选择性地跳过某些帧并使用参考帧来预测和重建视频内容&#xff0c;从而减少编码所需的比特率&#xff0c;同时保持较高的视频质量。在视频编码过程中&#xff0c;如果…

CUDA学习-内存访问

一 访存合并 1.1 说明 本部分内容主要参考: 搞懂 CUDA Shared Memory 上的 bank conflicts 和向量化指令(LDS.128 / float4)的访存特点 - 知乎 1.2 share memory结构 图1.1 share memory结构 放在 shared memory 中的数据是以 4 bytes(即 32 bits)作为 1 个 word,依…

信息学奥赛一本通 1342:【例4-1】最短路径问题

【题目描述】 平面上有n个点&#xff08;n<100&#xff09;&#xff0c;每个点的坐标均在-10000~10000之间。其中的一些点之间有连线。 若有连线&#xff0c;则表示可从一个点到达另一个点&#xff0c;即两点间有通路&#xff0c;通路的距离为两点间的直线距离。现在的任务是…

「AI学习笔记」深度学习进化史:从神经网络到“黑箱技术”(三)

在这篇文章中&#xff0c;我们将探讨深度学习&#xff08;DL&#xff09;这一领域的最新发展&#xff0c;以及它如何从传统机器学习&#xff08;ML&#xff09;中独立出来&#xff0c;成为一个独立的生态系统。深度学习的核心思想与我们大脑中的神经网络高度相似&#xff0c;因…

On to OpenGL and 3D computer graphics

2. On to OpenGL and 3D computer graphics 声明&#xff1a;该代码来自&#xff1a;Computer Graphics Through OpenGL From Theory to Experiments&#xff0c;仅用作学习参考 2.1 First Program Square.cpp完整代码 /// // square.cpp // // OpenGL program to draw a squ…

蓝桥杯练习日常|递归-进制转换

蓝桥云课760数的计算 一、递归 题目&#xff1a; 我的解题代码&#xff1a; #include <iostream> using namespace std; int sum0; int main() {// 请在此输入您的代码int n;cin>>n;int fun(int n);fun(n); cout<<sum<<\n;return 0; } // void fu…