一条自由游动的鲸鱼
先看效果：
再看代码：
<!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：相对单位，基准点为…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了，报错如下四、启动不了，解决如下 总结 问题原因 在应用中可以看到chrome，但是打不开(说明：原来的ubuntu系统出问题了，这个是备用的硬盘&a…...
学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2
每日一言 今天的每一份坚持，都是在为未来积攒底气。 案例：OLED显示一个A 这边观察到一个点，怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 ： 如果代码里信号切换太快（比如 SDA 刚变，SCL 立刻变&#…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...
AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...