一条自由游动的鲸鱼
先看效果：
再看代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鲸鱼</title><style>#canvas-container {width: 100%;height: 100vh;overflow: hidden;}</style>
</head>
<body>
<div id="canvas-container"></div>
<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.3/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">{"imports": {"three": "https://unpkg.com/three@0.154.0/build/three.module.js","three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm/"}}
</script>
<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.3/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">{"imports": {"three": "https://unpkg.com/three@0.154.0/build/three.module.js","three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm/"}}
</script>
</body>
<script type="module">import * as THREE from "three";import { OrbitControls } from "three/addons/controls/OrbitControls.js";import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";import { RenderPass } from "three/addons/postprocessing/RenderPass.js";import { OutputPass } from "three/addons/postprocessing/OutputPass.js";let composer, scene, camera, renderer, group;const params = {threshold: 0,strength: 0.1,radius: 0,exposure: 1};let allGeometry = [];function init() {scene = new THREE.Scene();scene.background = new THREE.Color(0x000000);camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);renderer = new THREE.WebGLRenderer({ alpha: true });const controls = new OrbitControls(camera, renderer.domElement);renderer.setSize(window.innerWidth, window.innerHeight);document.getElementById("canvas-container").appendChild(renderer.domElement);const sprite = new THREE.TextureLoader().load("https://assets.codepen.io/10590426/disc.png");sprite.colorSpace = THREE.SRGBColorSpace;const renderScene = new RenderPass(scene, camera);const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),1.5,0.4,0.85);bloomPass.threshold = params.threshold;bloomPass.strength = params.strength;bloomPass.radius = params.radius;const outputPass = new OutputPass(THREE.ReinhardToneMapping);group = new THREE.Group();composer = new EffectComposer(renderer);composer.addPass(renderScene);composer.addPass(bloomPass);composer.addPass(outputPass);// load the modelconst loader = new GLTFLoader();loader.load("https://assets.codepen.io/10590426/Whale+Poly.glb",function (gltf) {gltf.scene.traverse(function (child) {const geometry = child.geometry;const material = new THREE.PointsMaterial({// color: 0x0378ff,size: 0.6,alphaTest: 0.5,transparent: true,blending: THREE.AdditiveBlending,map: sprite,vertexColors: true});const whale = new THREE.Points(geometry, material);const wireframe = new THREE.WireframeGeometry(geometry);const line = new THREE.LineSegments(wireframe);line.material.depthTest = false;line.material.opacity = 0.006;line.material.transparent = true;group.add(line);group.add(whale);scene.add(group);allGeometry.push(line);allGeometry.push(whale);});});camera.position.y = -25;camera.position.z = 12;camera.position.x = 10;controls.update();}let elapsed = 0;const clamp = (num, min, max) => Math.min(Math.max(num, min), max);function animate() {requestAnimationFrame(animate);scene.rotation.z += 0.004;renderer.render(scene, camera);elapsed += 0.02;for (const particles of allGeometry) {const positions = particles?.geometry?.attributes?.position?.array;let colors = [];if (positions) {for (let i = 0; i < positions.length; i += 3) {let waveY =0.03 *Math.cos(0.1 * (positions[i] / 2) + positions[i + 2] / 12 + elapsed);positions[i + 1] = positions[i + 1] + waveY;// 基于y位置创建颜色let color = new THREE.Color(0x0378ff);color.setHSL(0.65 * clamp(Math.sin(0.1 * positions[i + 2] + elapsed), 0.6, 1),1,0.4);colors.push(color.r, color.g, color.b);}particles.geometry.setAttribute("color",new THREE.Float32BufferAttribute(colors, 3));particles.geometry.attributes.position.needsUpdate = true;particles.geometry.attributes.color.needsUpdate = true;}}composer.render();}init();animate();</script>
</html>
相关文章：
一条自由游动的鲸鱼
先看效果： 再看代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>鲸鱼</title><style>#canvas-container {width: 100%;height: 100vh;overflow: hidden;}&l…...
将python源代码打包成.exe可执行文件
步骤 1、安装pyinstaller2、打开终端或命令提示符窗口并进入解释器的虚拟环境3、从解释器的虚拟环境进入包含要打包Python文件的目录4、通过以下命令打包5、打包后文件存放位置 1、安装pyinstaller pip install pyinstaller2、打开终端或命令提示符窗口并进入解释器的虚拟环境…...
【数据结构篇】手写双向链表、单向链表（超详细）
文章目录 链表1、基本介绍2、单向链表2.1 带头节点的单向链表测试类：链表实现类： 2.2 不带头节点的单向链表2.3 练习测试类：链表实现类： 3、双向链表测试类：双向链表实现类： 4、单向环形链表**测试类**&…...
linux 中的串口驱动
1.流程描述 打开串口设备：首先需要打开串口设备文件，通常是/dev/ttyX（如/dev/ttyUSB0，/dev/ttyS0等）。可以使用open()系统调用打开串口设备文件，获取一个文件描述符。 配置串口属性：打开…...
棱镜七彩正式加入龙蜥社区安全联盟（OASA）
近日，龙蜥社区安全联盟（OASA）正式成立，棱镜七彩成为该联盟成员单位。 龙蜥社区安全联盟是促进产业合作的非营利组织，致力于打造中立开放、聚焦操作系统信息安全的交流平台，推进龙蜥社区乃至整个产业安全生态…...
STM32——STM32F401x系列标准库的下载+环境搭建+建工程步骤（更完整）
文章目录 标准库的下载环境搭建建工程最后的话 标准库的下载 1.STM32标准库的官网下载网站https://www.st.com/content/st_com/en.html 2. 3. 4. 5. 6. 7.点击之后下滑 8.选择自己需要的版本下载 环境搭建建工程 大致步骤同之前我写的一篇STM32——建工程差不多࿰…...
基于ArcGIS土地利用量化人类活动的分析及模型构建
ArcGIS产品线为用户提供一个可伸缩的，全面的GIS平台。ArcObjects包含了许多的可编程组件，从细粒度的对象（例如单个的几何对象）到粗粒度的对象（例如与现有ArcMap文档交互的地图对象）涉及面极广，这…...
特性Attribute
本文只提及常用的特性，更多特性请查看官方文档。 AddComponentMenu - Unity 脚本 API 常用特性 AddComponentMenu 添加组件菜单 使用 AddComponentMenu 属性可在“Component”菜单中的任意位置放置脚本，而不仅是“Component > Scripts”菜单。 使用…...
pyqt5, 如何在窗口上显示10个点地循环进度条。
要在PyQt5窗口上显示从1个点逐渐增加到10个点，然后周而复始地循环，可以使用PyQt5的图形绘制功能和定时器来实现。以下是一个简单的例子： import sys from PyQt5.QtWidgets import QApplication, QWidget from PyQt5.QtGui import QPainter, …...
VM里ubuntu虚拟无法启动
开始认为是VM的设置问题，按照这个链接关闭的3d加速图像显示，以及那个cmd命令，但是没什么用。 后来看到一篇博文和我的错误一模一样，都是只有一个光标在闪。于是按照这个操作进行了一遍，发现是home文件满了，…...
信息学奥赛一本通——1156：求π的值
文章目录 题目【题目描述】【输入】【输出】【输入样例】【输出样例】 AC代码 题目 【题目描述】 根据公式： a r c t a n x ( x ) x − x 3 3 x 5 5 − x 7 7 ⋯ arctanx\left ( x \right ) x- \frac{x^3}{3} \frac{x^5}{5}-\frac{x^7}{7} \cdots arctanx(x…...
BI报表工具有哪些作用？奥威BI全面剖析数据
BI报表工具有哪些作用？主要的作用是通过整合多业务来源数据，全面分析挖掘数据，来帮助企业实现数据化运营、支持智能决策、实现数据资产沉淀和增值、进行数据挖掘和预测分析、提高数据可读性和数据可视化程度等，从而提高企业的竞争…...
【云原生K8s】初识Kubernetes的理论基础
K8S由google的Borg系统(博格系统，google内部使用的大规模容器编排工具)作为原型，后经GO语言延用Borg的思路重写并捐献给CNCF基金会开源。 云原生基金会（CNCF）于2015年12月成立，隶属于Linux基金会。CNCF孵化的第一个项目…...
：jdk8之前的日期API)
javaAPI(三)：jdk8之前的日期API
jdk 8之前的日期时间API 1、System类中currentTimeMillis()。 2、 java.util.Date和子类java.sql.Date。 3、SimpleDateFormat 4、Calendar System返回时间戳 long time System.currentTimeMillis();System.out.println(time);Date类 java.util.Date类 实例化 构造器一&a…...
驱动开发（中断）
头文件： #ifndef __LED_H__ #define __LED_H__#define PHY_LED1_MODER 0X50006000 #define PHY_LED1_ODR 0X50006014 #define PHY_LED1_RCC 0X50000A28#define PHY_LED2_MODER 0X50007000 #define PHY_LED2_ODR 0X50007014 #define PHY_LED2_RCC 0X50000A28#def…...
TypeScript最新语法总结
注意注意！！！本文介绍的是最新的TypeScript4的重要语法 第一部分：TypeScript的简介 TypeScript 是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范，…...
sentinel组件
目录 定义 4.加SentinelResource,blockHander是超过阈值之后执行的函数 5.设置阈值 6.springboot集成sentinel 定义 1.sentinel知道当前流量大小，在浏览器和后端之间加sentinel控制流量，避免大批量的瞬时请求都达到服务上，将服务压垮 2.…...
26 MFC序列化函数
文章目录 Serialize对于存储文件的序列化 Serialize Serialize 是一个在 MFC (Microsoft Foundation Classes) 中常用的函数或概念。它用于将对象的数据进行序列化和反序列化，便于在不同的场景中保存、传输和恢复对象的状态。 在 MFC 中，Serialize 函数…...
GC 深入（小白，对gc有一个进一步的了解）
垃圾回收器的搭配 一般固定 一般这年轻代垃圾回收器，老年代垃圾回收器，如上图搭配着使用 1.8呢默认就是最后边那哥俩 jvm调优 一个就是增加吞吐量 一个就是减少STW的时间。 三色标记算法（理解根可达算法） 并发的可达性分析 有…...
CSS前端面试
文章目录 rem、em、vh、px各自代表的含义？盒模型poison 定位属性flex属性让元素水平垂直居中页面适配的方法有哪些 rem、em、vh、px各自代表的含义？ px：绝对单位，页面按精确像素展示 em：相对单位，基准点为…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
MySQL 8.0 OCP 英文题库解析（十三）
Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...