当前位置：首页 > news >正文

一条自由游动的鲸鱼

news 2025/7/22 16:11:55

先看效果：
在这里插入图片描述
再看代码：

<!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…...

编程日记 2023/8/5 23:40:51

将python源代码打包成.exe可执行文件

步骤 1、安装pyinstaller2、打开终端或命令提示符窗口并进入解释器的虚拟环境3、从解释器的虚拟环境进入包含要打包Python文件的目录4、通过以下命令打包5、打包后文件存放位置 1、安装pyinstaller pip install pyinstaller2、打开终端或命令提示符窗口并进入解释器的虚拟环境…...

编程日记 2023/8/5 23:39:45

【数据结构篇】手写双向链表、单向链表（超详细）

文章目录链表1、基本介绍2、单向链表2.1 带头节点的单向链表测试类：链表实现类： 2.2 不带头节点的单向链表2.3 练习测试类：链表实现类： 3、双向链表测试类：双向链表实现类： 4、单向环形链表**测试类**&…...

编程日记 2023/8/5 23:38:44

linux 中的串口驱动

1.流程描述打开串口设备：首先需要打开串口设备文件，通常是/dev/ttyX（如/dev/ttyUSB0，/dev/ttyS0等）。可以使用open()系统调用打开串口设备文件，获取一个文件描述符。配置串口属性：打开…...

编程日记 2023/8/5 23:37:42

棱镜七彩正式加入龙蜥社区安全联盟（OASA）

近日，龙蜥社区安全联盟（OASA）正式成立，棱镜七彩成为该联盟成员单位。龙蜥社区安全联盟是促进产业合作的非营利组织，致力于打造中立开放、聚焦操作系统信息安全的交流平台，推进龙蜥社区乃至整个产业安全生态…...

编程日记 2023/8/5 23:36:41

STM32——STM32F401x系列标准库的下载+环境搭建+建工程步骤（更完整）

文章目录标准库的下载环境搭建建工程最后的话标准库的下载 1.STM32标准库的官网下载网站https://www.st.com/content/st_com/en.html 2. 3. 4. 5. 6. 7.点击之后下滑 8.选择自己需要的版本下载环境搭建建工程大致步骤同之前我写的一篇STM32——建工程差不多&#xff0…...

编程日记 2023/8/5 23:35:39

基于ArcGIS土地利用量化人类活动的分析及模型构建

ArcGIS产品线为用户提供一个可伸缩的，全面的GIS平台。ArcObjects包含了许多的可编程组件，从细粒度的对象（例如单个的几何对象）到粗粒度的对象（例如与现有ArcMap文档交互的地图对象）涉及面极广，这…...

编程日记 2023/8/5 23:34:36

特性Attribute

本文只提及常用的特性，更多特性请查看官方文档。 AddComponentMenu - Unity 脚本 API 常用特性 AddComponentMenu 添加组件菜单使用 AddComponentMenu 属性可在“Component”菜单中的任意位置放置脚本，而不仅是“Component > Scripts”菜单。使用…...

编程日记 2023/8/5 23:33:33

pyqt5, 如何在窗口上显示10个点地循环进度条。

要在PyQt5窗口上显示从1个点逐渐增加到10个点，然后周而复始地循环，可以使用PyQt5的图形绘制功能和定时器来实现。以下是一个简单的例子： import sys from PyQt5.QtWidgets import QApplication, QWidget from PyQt5.QtGui import QPainter, …...

编程日记 2023/8/5 23:32:31

VM里ubuntu虚拟无法启动

开始认为是VM的设置问题，按照这个链接关闭的3d加速图像显示，以及那个cmd命令，但是没什么用。后来看到一篇博文和我的错误一模一样，都是只有一个光标在闪。于是按照这个操作进行了一遍，发现是home文件满了&#xff0c…...

编程日记 2023/8/5 23:31:28

信息学奥赛一本通——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…...

编程日记 2023/8/5 23:30:26

BI报表工具有哪些作用？奥威BI全面剖析数据

BI报表工具有哪些作用？主要的作用是通过整合多业务来源数据，全面分析挖掘数据，来帮助企业实现数据化运营、支持智能决策、实现数据资产沉淀和增值、进行数据挖掘和预测分析、提高数据可读性和数据可视化程度等，从而提高企业的竞争…...

编程日记 2023/8/5 23:29:25

【云原生K8s】初识Kubernetes的理论基础

K8S由google的Borg系统(博格系统，google内部使用的大规模容器编排工具)作为原型，后经GO语言延用Borg的思路重写并捐献给CNCF基金会开源。云原生基金会（CNCF）于2015年12月成立，隶属于Linux基金会。CNCF孵化的第一个项目…...

编程日记 2023/8/5 23:28:23

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…...

编程日记 2023/8/5 23:27:22

驱动开发（中断）

头文件： #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…...

编程日记 2023/8/5 23:26:20

TypeScript最新语法总结

注意注意！！！本文介绍的是最新的TypeScript4的重要语法第一部分：TypeScript的简介 TypeScript 是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范&#xff0c…...

编程日记 2023/8/5 23:25:17

sentinel组件

目录定义 4.加SentinelResource,blockHander是超过阈值之后执行的函数 5.设置阈值 6.springboot集成sentinel 定义 1.sentinel知道当前流量大小，在浏览器和后端之间加sentinel控制流量，避免大批量的瞬时请求都达到服务上，将服务压垮 2.…...

编程日记 2023/8/5 23:24:13

26 MFC序列化函数

文章目录 Serialize对于存储文件的序列化 Serialize Serialize 是一个在 MFC (Microsoft Foundation Classes) 中常用的函数或概念。它用于将对象的数据进行序列化和反序列化，便于在不同的场景中保存、传输和恢复对象的状态。在 MFC 中，Serialize 函数…...

编程日记 2023/8/5 23:23:11

GC 深入（小白，对gc有一个进一步的了解）

垃圾回收器的搭配一般固定一般这年轻代垃圾回收器，老年代垃圾回收器，如上图搭配着使用 1.8呢默认就是最后边那哥俩 jvm调优一个就是增加吞吐量一个就是减少STW的时间。三色标记算法（理解根可达算法） 并发的可达性分析有…...

编程日记 2023/8/5 23:22:10

CSS前端面试

文章目录 rem、em、vh、px各自代表的含义？盒模型poison 定位属性flex属性让元素水平垂直居中页面适配的方法有哪些 rem、em、vh、px各自代表的含义？ px：绝对单位，页面按精确像素展示 em：相对单位，基准点为…...

编程日记 2023/8/5 23:21:09

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/7/22 6:02:28

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...

编程新知 2025/7/9 19:27:38

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/6/20 18:20:46

SpringCloudGateway 自定义局部过滤器

场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/7/18 5:11:17

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/7/22 5:39:42