一条自由游动的鲸鱼
先看效果：
再看代码：
<!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：相对单位，基准点为…...
在rocky linux 9.5上在线安装 docker
前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...
云原生安全实战：API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...
第7篇：中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中，可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中，必须做到： 🔍 追踪每一条 SQL 的生命周期（从入口到数据库执行）&#…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...