Three.js 跳跃动画教程

发布时间：2026/9/23 20:44:18

Three.js 跳跃动画教程
跳跃动画 ·Jump Animate· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么ShaderMaterial 自定义着色器实现核心视觉效果OrbitControls 相机轨道交互requestAnimationFrame渲染循环与resize自适应效果说明本案例演示跳跃动画效果基于 WebGL 实现「跳跃动画」可视化效果附完整可运行源码核心用到 ShaderMaterial、OrbitControls。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Scene / Camera / WebGLRenderer构成最小渲染闭环大场景可开logarithmicDepthBuffer缓解 Z-fighting。ShaderMaterial通过uniforms 自定义 GLSL 控制逐像素/逐点效果透明粒子常配合depthTest: false。OrbitControls提供轨道旋转/缩放开启enableDamping后需在 animate 中controls.update()。实现步骤搭建 Scene、PerspectiveCamera、WebGLRenderer挂载 canvas 并处理resize定义 uniforms / onBeforeCompile 或 ShaderMaterial编写 GLSL 与材质参数创建 OrbitControls及 Raycaster 等交互控件若源码包含在requestAnimationFrame循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GUI } from dat.guiconst box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 2000)camera.position.set(10, 10, 10)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)new OrbitControls(camera, renderer.domElement)scene.add(new THREE.GridHelper(10, 10))// uniforms const uniforms { points: { value: [ new THREE.Vector3(-30, 2.0, 0), new THREE.Vector3(0, 5.0, 0), new THREE.Vector3(30, 10.0, 0) ] }, // 目标点用于插值过渡 targetPoints: { value: [ new THREE.Vector3(-30, 2.0, 0), new THREE.Vector3(0, 5.0, 0), new THREE.Vector3(30, 10.0, 0) ] }, baseInfluenceRadius: { value: 5.0 }, heightToRadiusRatio: { value: 2.0 }, falloffPower: { value: 2.0 }, baseHeight: { value: 0.0 }, maxHeight: { value: 10.0 }, color1: { value: new THREE.Color(0x0066ff) }, color2: { value: new THREE.Color(0xff3300) }, }// 顶点着色器 const vertexShader uniform vec3 points[3]; uniform float baseInfluenceRadius; uniform float heightToRadiusRatio; uniform float falloffPower; uniform float baseHeight; uniform float maxHeight;varying float vHeightRatio;float calculateInfluence(vec3 point, vec3 vertex) { float distance2D length(point.xz - vertex.xz); float dynamicRadius baseInfluenceRadius point.y * heightToRadiusRatio; dynamicRadius max(dynamicRadius, baseInfluenceRadius); if (distance2D dynamicRadius) return 0.0; float normalizedDistance distance2D / dynamicRadius; float attenuation pow(1.0 - normalizedDistance, falloffPower); return attenuation * point.y; }void main() { vec4 worldPosition modelMatrix * vec4(position, 1.0); float heightOffset 0.0; heightOffset calculateInfluence(points[0], worldPosition.xyz); heightOffset calculateInfluence(points[1], worldPosition.xyz); heightOffset calculateInfluence(points[2], worldPosition.xyz); vHeightRatio clamp(heightOffset / maxHeight, 0.0, 1.0); vec3 newPosition position; newPosition.y heightOffset baseHeight; gl_Position projectionMatrixmodelViewMatrixvec4(newPosition, 1.0); }// 片段着色器 const fragmentShader uniform vec3 color1; uniform vec3 color2; varying float vHeightRatio;void main() { vec3 color mix(color1, color2, vHeightRatio); gl_FragColor vec4(color, 1.0); }// 创建网格 const geometry new THREE.BoxGeometry(200, 10, 1, 200, 1, 1).rotateX(-Math.PI / 2) const material new THREE.ShaderMaterial({ uniforms, vertexShader, fragmentShader, side: THREE.DoubleSide, wireframe: true }) scene.add(new THREE.Mesh(geometry, material))// GUI 参数 const params { baseInfluenceRadius: 5.0, heightToRadiusRatio: 2.0, falloffPower: 2.0, baseHeight: 0.0, maxHeight: 10.0, autoUpdate: true, interval: 1.0, wireframe: true, color1: #0066ff, color2: #ff3300, }// GUI 控制 const gui new GUI() gui.add(params, baseInfluenceRadius, 1, 50).name(影响半径).onChange(v uniforms.baseInfluenceRadius.value v) gui.add(params, heightToRadiusRatio, 0, 10).name(高度放大系数).onChange(v uniforms.heightToRadiusRatio.value v) gui.add(params, falloffPower, 0.1, 10).name(衰减指数).onChange(v uniforms.falloffPower.value v) gui.add(params, baseHeight, -5, 5).name(基础高度).onChange(v uniforms.baseHeight.value v) gui.add(params, maxHeight, 1, 30).name(最大高度).onChange(v uniforms.maxHeight.value v) gui.add(params, autoUpdate).name(自动更新) gui.add(params, interval, 0.3, 5).name(更新间隔(秒)) gui.add(params, wireframe).name(线框模式).onChange(v material.wireframe v) gui.addColor(params, color1).name(低点颜色).onChange(v uniforms.color1.value.set(v)) gui.addColor(params, color2).name(高点颜色).onChange(v uniforms.color2.value.set(v))// 随机生成目标点 function randomizeTargets() { for (let i 0; i 3; i) { uniforms.targetPoints.value[i].set( Math.random() * 200 - 100, Math.random() * params.maxHeight, 0 ) } }// 定时更新目标 let timer 0 const clock new THREE.Clock()function animate() { requestAnimationFrame(animate) const delta clock.getDelta()// 定时更新目标点 if (params.autoUpdate) { timer delta if (timer params.interval) { timer 0 randomizeTargets() } }// 平滑插值到目标点 for (let i 0; i 3; i) { uniforms.points.value[i].lerp(uniforms.targetPoints.value[i], delta * 3) }renderer.render(scene, camera) } animate()window.onresize () { renderer.setSize(box.clientWidth, box.clientHeight) camera.aspect box.clientWidth / box.clientHeight camera.updateProjectionMatrix() }完整源码GitHub小结本文提供跳跃动画完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库

相关新闻

人形机器人四大核心技术赛道拆解：运动控制、具身智能、灵巧操作与能源结构

人形机器人四大核心技术赛道拆解：运动控制、具身智能、灵巧操作与能源结构

1. 人形机器人不是科幻片道具，而是正在拆解的工业级系统工程 “人形机器人”这五个字最近频繁出现在科技媒体头条、产业峰会主论坛和一级市场BP里，但很多人第一次听到时，下意识反应还是《我，机器人》里的桑尼，或者波士…

2026/9/18 16:39:52 阅读更多 →
第13章：安全基础——账号、权限与连接加密

第13章：安全基础——账号、权限与连接加密

1. 项目背景 业务场景：本地生活电商上线 6 个月，运行平稳——直到某天凌晨 3 点，运维被告警电话吵醒。一个外包开发离职前把自己的 MongoDB 账号分享到了公共 GitHub 仓库，黑客用这个账号在凌晨删除了 3 个核心集合，还…

2026/9/23 1:12:11 阅读更多 →
C# LINQ 从入门到精通——用 SQL 一样的语法操作集合，Where、Select、GroupBy 带你告别 foreach 地狱

C# LINQ 从入门到精通——用 SQL 一样的语法操作集合，Where、Select、GroupBy 带你告别 foreach 地狱

目录为什么需要 LINQ？LINQ 的两种写法：查询语法与方法语法最常用的 10 个标准查询运算符延迟执行 vs 立即执行（重要概念）LINQ to Objects 实战：学生成绩分析LINQ to SQL 与 Entity Framework 初探综合实战：…

2026/9/23 8:32:18 阅读更多 →

最新新闻

3个后端框架做云记账软件：Go vs Java vs Python完整示例对比

3个后端框架做云记账软件：Go vs Java vs Python完整示例对比

3个后端框架做云记账软件：Go vs Java vs Python完整示例对比 面试被问“高并发下云记账软件怎么保证数据一致性”，你如果只会背概念，现场写不出代码，基本就凉了一半。很多在职开发者，平时用框架写得飞快，一被追问底层原理和实战细…

2026/9/23 20:44:02 阅读更多 →
切客网实战项目性能优化：解决版本升级后API全变了的坑

切客网实战项目性能优化：解决版本升级后API全变了的坑

切客网实战项目性能优化：解决版本升级后API全变了的坑 版本升级后 API 全变了，这是很多资深工程师在维护老系统时的噩梦。在切客网这类高并发实战项目中，这种突变往往不是简单的文档更新，而是底层调用链路的彻底重构。如果你还在用旧版 SDK…

2026/9/23 20:44:02 阅读更多 →
3个维普帐号坑点 手写实现登录逻辑保你面试不挂

3个维普帐号坑点 手写实现登录逻辑保你面试不挂

3个维普帐号坑点 手写实现登录逻辑保你面试不挂 刚进大厂面试，问维普帐号相关的业务逻辑，90%的候选人卡壳。看了一堆教程还是不会写项目，这就是最大的痛点。面试官要的不是背定义，而是 手写实现…

2026/9/23 20:44:02 阅读更多 →
水煮鱼菜谱的 RAG 全链路实战：从 Markdown 结构化分块、元数据增强到混合检索与智能生成

水煮鱼菜谱的 RAG 全链路实战：从 Markdown 结构化分块、元数据增强到混合检索与智能生成

教程人工智能大模型RAG 【免费下载链接】all-in-rag 🔍大模型应用开发实战一：RAG 技术全栈指南，在线阅读地址：https://datawhalechina.github.io/all-in-rag/ 项目地址： https://gitcode.com/datawhalechina/all-in-ra…

2026/9/23 20:44:02 阅读更多 →
3个坑教你手写实现MAMEO核心逻辑避坑指南

3个坑教你手写实现MAMEO核心逻辑避坑指南

3个坑教你手写实现MAMEO核心逻辑避坑指南 复制来的 MAMEO 代码跑不通，报错信息满屏红，看着头大？别慌，这几乎是每个从其他领域转岗到游戏开发的朋友都经历过的至暗时刻。很多新手习惯直接复制 GitHub…

2026/9/23 20:44:02 阅读更多 →
空投箱实战：3步搞定资源投放的保姆级教程

空投箱实战：3步搞定资源投放的保姆级教程

空投箱实战：3步搞定资源投放的保姆级教程 官方文档往往长篇大论，让人抓不住重点，新手极易在配置参数时迷失方向。这份空投箱实战指南摒弃冗余理论，直接切入核心配置流程。我们将通过一个最小可运行示例，彻底搞懂资源动态加载的底层逻辑。…

2026/9/23 20:43:01 阅读更多 →

日新闻

3招搞定手机怎么下载微信面试难题实战项目解析

3招搞定手机怎么下载微信面试难题实战项目解析

3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A…

2026/9/23 0:00:23 阅读更多 →
2k显示屏性能优化踩坑：版本升级后API全变了，这份源码解析救了我

2k显示屏性能优化踩坑：版本升级后API全变了，这份源码解析救了我

2k显示屏性能优化踩坑：版本升级后API全变了，这份源码解析救了我 刚把开发环境的显示器从1080P换到2K，跑老项目直接报错，版本升级后 API…

2026/9/23 0:01:25 阅读更多 →
3步搞定美眉图实战项目，告别官方文档抓不住重点

3步搞定美眉图实战项目，告别官方文档抓不住重点

3步搞定美眉图实战项目，告别官方文档抓不住重点 官方文档翻了三遍还是云里雾里？别急，美眉图在实战项目中常被用来做数据可视化，但它的原理比你想的简单。今天咱们直接上手，用一个完整的小项目把美眉图跑通，不再死磕那些冗长的理论说明。…

2026/9/23 0:01:25 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事：用Flutter给OpenHarmony做一款游戏集合类的App，说白了就是把若干小游戏塞进一个壳里，用统一入口分发。这个方向本身不算新鲜，真正让我花了不少心思的，是首页那堆游戏卡…

2026/9/23 4:55:02 阅读更多 →
Word表格编号全攻略：从列表编号到题注交叉引用

Word表格编号全攻略：从列表编号到题注交叉引用

写Word文档，最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事：今天在表后面多加了两个空白行，明天给客户交稿前发现整个章节的编号全部错位，光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/23 4:49:06 阅读更多 →
从第一个站到第二个站：独立开发者的静态网站选型与落地实践

从第一个站到第二个站：独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年，说实话，第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年，流量惨淡、功能臃肿、代码自己都懒得看第二遍之后，我才慢慢琢磨明白一个道理：第一个网站是练手&…

2026/9/23 9:53:41 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能分类：[AI/大模型]细分主题：AI 增强型 CI/CD 流水线自动化与 GitOps 实践：Agent 工作流、工具调用与任务拆解：从原型到生产的验收清单很多团队在尝试用大…

2026/9/23 9:53:40 阅读更多 →
容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场分类：[工程技术]细分主题：Kubernetes 生产环境运维与排障实战：可复制的项目复盘模板与决策记录大部分团队的事故复盘报告，最后都变成了躺在 Confluence 或钉…

2026/9/23 9:53:40 阅读更多 →
容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步分类：[工程技术]细分主题：Docker 容器化技术与镜像安全管理：核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用（包含 Web 接口、后台…

2026/9/23 9:53:40 阅读更多 →