wave-animation，然后进去初始化项目：npm init -y，这一步会生成 package.json 文件，记录项目的基本信息。three/addons/math/Vector2.js，以及监听鼠标事件需要用到的工具库。输入命令 npm install three 就行，安装完后，在项目里新建 index.html 和 src 文件夹，src 里放 main.js 作为入口文件。index.html 里，先把基本的 HTML 结构写好，引入 Three.js 的库，注意这里用 ES6 模块的方式引入，代码大概是这样：DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>迷幻波浪动画title>
<style>
body { margin: ; }
canvas { display: block; }
style>
head>
<body>
<script type="module" src="./src/main.js">script>
body>
html>
main.js 里写核心的 Three.js 代码了。const scene = new THREE.Scene();。相机就像我们的眼睛，这里用透视相机，视角设为 75 度，宽高比用窗口的宽高比，近裁剪面设为 0.1，远裁剪面设为 1000，代码是 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);，相机的位置稍微往后退一点，比如 camera.position.z = 5;，这样能看得更清楚。const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight);，然后把渲染器的 DOM 元素添加到页面 body 里，document.body.appendChild(renderer.domElement);。BufferGeometry 来创建自定义的几何体。先确定波浪的网格大小，比如宽度和高度方向各有 100 个点，const widthSegments = 100; const heightSegments = 100;。const geometry = new THREE.BufferGeometry();
const positions = [];
for (let y = ; y <= heightSegments; y++) {
for (let x = ; x <= widthSegments; x++) {
const px = (x / widthSegments) * - ; // x 范围在 -2 到 2 之间
const pz = (y / heightSegments) * - ; // z 范围在 -2 到 2 之间
positions.push(px, , pz); // y 暂时为 0
}
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));。time 作为 uniform 变量，然后根据顶点的 x 和 z 坐标计算波浪的高度，这里用正弦函数来生成波浪，比如 y = Math.sin(x * 3 + time) * 0.5 + Math.sin(z * 3 + time) * 0.5;，这样就能形成一个立体的波浪效果。varying vec2 vUv;
uniform float time;
void main() {
vUv = uv;
vec3 pos = position;
pos.y = sin(pos.x * 3.0 + time) * 0.5 + sin(pos.z * 3.0 + time) * 0.5; // 计算波浪高度
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
gl_FragColor = vec4(0.2, 0.5, 0.8, 1.0);。ShaderMaterial，把顶点着色器和片元着色器传进去，同时设置一些材质属性，比如透明度、混合模式等，const material = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: { time: { value: 0 }, mouse: { value: new THREE.Vector2() } // 后面用于鼠标位置 }, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending });mousemove 事件监听，获取鼠标在画布上的坐标，注意坐标要转换为 Three.js 所需的范围，x 和 y 都从 -1 到 1，window.addEventListener('mousemove', (e) => { material.uniforms.mouse.value.x = (e.clientX / window.innerWidth) * 2 - 1; material.uniforms.mouse.value.y = -((e.clientY / window.innerHeight) * 2 - 1); // y 轴反转 });vec3 color = vec3(mouse.x * 0.5 + 0.5, mouse.y * 0.5 + 0.5, 0.8);，这样鼠标移动时颜色就会跟着变化。material.uniforms.time.value += 0.05;，然后渲染场景和相机，renderer.render(scene, camera);，最后用 requestAnimationFrame(animate); 来循环调用动画函数。window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });const mesh = new THREE.Mesh(geometry, material);，然后添加到场景里，scene.add(mesh);。main.js 里，确保没有语法错误。npx serve 命令启动一个本地服务器，在浏览器里访问 http://localhost:3000 就能看到效果啦。鼠标移动到画布上，波浪的颜色会跟着变化，呈现出迷幻的效果。https://github.com/your-username/wave-animation-threejs（这里记得替换成你实际的仓库地址）。仓库里不仅有完整的代码，还有详细的安装步骤和说明，新手也能轻松跑起来。3.0 改成 4.0 或者 2.0，看看效果变化。还有颜色的调节，可以在片元着色器里加入更多的计算，比如使用 HSV 颜色模型，让颜色变化更丰富。widthSegments 和 heightSegments 的值，比如从 100 改成 50，看看性能和效果的平衡。🔍精准检测：揭秘 2025 年免费 AIGC 检测平台的核心技术 在人工智能生成内容（AIGC）爆发式增长的今天，如何快速识别并降低 AI 痕迹成为学术、创作领域的刚需。2025 年，多款免费平台通
最近总被身边朋友问：“我论文拿去检测，为啥两次结果差那么多？”“AI 检测到底是怎么判断抄袭的？” 作为跟各类检测系统打交道多年的人，今天就掰开揉碎了跟大家聊聊论文 AI 检测这点事 —— 从原理到数
📌 内容垂直度：决定流量价值的根基做流量主的都清楚，账号内容乱成一锅粥的时候，单价基本高不了。你今天写美食，明天聊科技，后天又发情感故事，算法都摸不清你的定位，怎么可能给你匹配高价值广告？内容垂
现在市面上免费 AI 查重工具特别多，大家用的时候可得擦亮眼睛。有些工具看着免费，实际藏着不少 “坑”，但也有一些是真正的 “宝”。那到底怎么分辨呢？咱们从实际情况出发好好聊聊。 免费 AI 查重工具
?双机位布置：打造360°无死角面试环境力扣模拟面试的双机位要求让不少同学犯难，其实把它想象成给电脑装个「监控搭档」就简单了。主机位就是咱们平时用的电脑摄像头，记得调整到能露出整张脸和桌面的角度——下巴别藏在阴影里，键盘也别只露出半个。副机位一般用手机支架固定，放在身体侧后方45度角，这个位置既能拍
?精准提分黑科技！ExamifyAI如何重塑2025考试备考模式？一、核心功能大揭秘：AI如何让考试准备更高效？ExamifyAI作为新一代智能考试平台，最吸引人的地方就是它的自适应学习引擎。这个系统就像一个贴心的私人教练，能根据你的答题数据自动调整学习路径。比如你在数学几何题上错误率高，系统会优先
你可能觉得公众号注册就是填几个信息的事，殊不知，这里面的每个选择都像蝴蝶扇动翅膀，未来三年的运营轨迹可能就被悄悄改变了。很多人刚开始没当回事，等到后面想调整，才发现处处受限，那叫一个后悔。今天就跟你好好聊聊，注册时那些看似不起眼的选择，到底能给未来的运营带来多大影响。📌账号类型选不对，三年运营路难
上周帮同事核查一篇AI写的行业报告，发现里面把2023年的用户增长率写成了2025年的预测数据。更离谱的是，引用的政策文件号都是错的。现在AI生成内容速度快是快，但这种硬伤要是直接发出去，读者信了才真叫坑人。今天就掰开揉碎了说，AI写作怎么做好事实核查，别让你的头条文章变成 误导重灾区 。📌AI写
🎯维度一：选题像打靶，靶心必须是「用户情绪储蓄罐」做内容的都清楚，10w+爆文的第一步不是写，是选。选题选不对，后面写得再好都是白搭。高手选选题，就像往用户的「情绪储蓄罐」里投硬币，投对了立刻就能听到回响。怎么判断选题有没有击中情绪？看三个指标：是不是高频讨论的「街头话题」？是不是藏在心里没说的「抽
📌135编辑器会员值不值得买？AI模板库和秀米H5谁更胜一筹？🔍135编辑器会员的核心价值解析企业级商用保障与效率提升135编辑器的企业会员堪称新媒体运营的「合规保险箱」。根据实际案例，某团队通过企业会员节省了大量设计费用，完成多篇内容创作，单篇成本从千元降至百元内。这得益于其海量正版模板和素材库，
新公众号被限流怎么办？粉丝增长影响分析及2025恢复指南🔍新公众号限流的核心原因解析新公众号被限流，往往是多个因素叠加的结果。根据2025年最新数据，超过70%的限流案例与内容质量直接相关。比如，有些新手喜欢用“震惊体”标题，像“惊！某公众号三天涨粉十万”，这类标题在2025年的算法里已经被明确标记
⚠️AI内容重复率高的3大核心原因现在用AI写东西的人越来越多，但很多人都会遇到同一个问题——重复率太高。明明是自己用工具生成的内容，一检测却显示和网上某些文章高度相似，这到底是为什么？最主要的原因是AI训练数据的重叠性。不管是ChatGPT还是国内的大模型，训练数据来源其实大同小异，都是爬取的互联
🌟135编辑器：公众号运营者的效率革命做公众号运营的朋友都知道，排版是个费时费力的活。一篇文章从内容到排版，没几个小时根本搞不定。不过现在好了，135编辑器的出现，彻底改变了这一现状。135编辑器是提子科技旗下的在线图文排版工具，2014年上线至今，已经成为国内新媒体运营的主流工具之一。它的功能非常
现在做内容的人几乎都离不开AI，但最头疼的就是原创度。平台检测一严格，那些模板化的AI文很容易被打回，甚至判定为“非原创”。但你知道吗？同样是用AI写东西，换个prompt指令词，原创度能差出天壤之别。我最近拿不同的prompt测了好几次，结果真的吓一跳——好的指令能让AI内容原创度直接从“及格线”