一条自由游动的鲸鱼
先看效果：
再看代码：
<!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：相对单位，基准点为…...
：从概念到架构设计)
AI智能体开发(一)：从概念到架构设计
定义与核心特征 AI智能体（AI Agent）是一种能够自主感知环境、做出决策并执行行动的AI系统。 与传统AI模型不同，Agent不仅仅是被动地"回答问题"，而是能够主动地"完成任务"。它像一个智能助手，能够理解你的目标，规划执行步骤，调用各种工具，最终交付…...
AMD Ryzen处理器终极调试指南：免费开源SMUDebugTool完整使用教程
AMD Ryzen处理器终极调试指南：免费开源SMUDebugTool完整使用教程 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: …...
wangEditor公式插件kityformula的‘幽灵注册’与按钮刷新：两个容易被忽略的Vue组件级问题
wangEditor公式插件kityformula的‘幽灵注册’与按钮刷新：两个容易被忽略的Vue组件级问题 在Vue3项目中集成wangEditor富文本编辑器并引入kityformula公式插件时，开发者往往会遇到一些看似诡异的问题。这些问题表面上是功能异常，实则隐藏着对…...
AutoCAD字体管理终极指南：如何彻底解决字体缺失问题
AutoCAD字体管理终极指南：如何彻底解决字体缺失问题 【免费下载链接】FontCenter AutoCAD自动管理字体插件 项目地址: https://gitcode.com/gh_mirrors/fo/FontCenter 还在为AutoCAD字体缺失问题而烦恼吗？FontCenter是您的专业字体管理解决方案&a…...
RK3568与RK3399深度对比：从架构到实战，边缘计算如何选型？
1. 项目概述：为什么我们需要重新审视RK3568与RK3399？最近在给一个边缘计算项目做硬件选型，客户的需求很明确：需要一块性能足够、接口丰富、功耗可控且长期供货稳定的核心板。在国产处理器的候选名单里，瑞芯微的RK3399和…...
终极网盘下载加速工具：告别限速，享受高速下载自由
终极网盘下载加速工具：告别限速，享受高速下载自由 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国移动云盘…...
3分钟上手XXMI启动器：一站式二次元游戏模组管理平台
3分钟上手XXMI启动器：一站式二次元游戏模组管理平台 【免费下载链接】XXMI-Launcher Modding platform for GI, HSR, WW and ZZZ 项目地址: https://gitcode.com/gh_mirrors/xx/XXMI-Launcher 你是否曾为管理不同游戏的模组而感到头疼？每个游戏都…...
OpenHarmony FA启动机制全解析：从本地到远程的分布式能力实现
1. 项目概述：从“点击图标”到“界面呈现”的旅程当我们谈论一个应用在OpenHarmony上的启动，尤其是FA（Feature Ability，特性能力）的启动时，很多人脑海里浮现的可能是“用户点击图标，然后应用打开…...
手把手教你用树莓派4B搭建个人服务器（保姆级图文教程，含SSH与远程桌面配置）
树莓派4B打造高性能个人服务器的终极指南 在当今数字化时代，拥有一个24小时在线的个人服务器不再是企业或技术巨头的专利。树莓派4B以其惊人的性价比和低功耗特性，正在重新定义个人服务器的可能性。想象一下，你的书架上安静运行着一台耗电仅5…...
七牛云：批量将标准存储文件转为归档直读存储
📋 整体流程图 下载安装 qshell → 配置密钥 → 列出符合条件的文件 → 生成批量转换清单 → 执行转换建议先看看不同类型有何区别，选择适合自己的：存储类型_产品简介_对象存储 - 七牛开发者中心https://developer.qiniu.com/kodo/3956/kodo…...