tQuery 动画入门旋转、位移与弹性动画的 6 个实用技巧【免费下载链接】tqueryextension system for three.js项目地址: https://gitcode.com/gh_mirrors/tq/tquery如果你正在寻找一个让 three.js 3D 场景动起来的轻量方案tQuery 动画就是你的好帮手。tQuery 是 three.js 的扩展系统用类似 jQuery 的链式语法封装了场景创建、渲染循环与动画 API让新手也能快速做出旋转、位移与弹性动画。本教程为你整理 6 个实用技巧从零开始让 3D 对象活起来全程只需几十行代码非常适合 three.js 动画入门学习者。技巧 1理解渲染循环一切 tQuery 动画的起点想让物体动起来第一步是理解动画的心脏——渲染循环。tQuery 通过 tquery.loop.js 中的tQuery.Loop管理每一帧的更新你只需要用world.hook()把回调挂进循环即可var world tQuery.createWorld().boilerplate().start(); world.hook(function(delta, now) { // 每一帧都会执行这里 });回调中的delta是距上一帧的时间差秒now是当前时间。tQuery.Loop还提供了三个优先级钩子hookPreRender渲染前、hookOnRender渲染时、hookPostRender渲染后并按优先级顺序执行方便你精确控制更新时机。理解了这个循环后面所有的动画技巧都建立在它之上。技巧 2旋转动画——基于 delta 实现匀速转动旋转是 3D 动画最常用的动作之一。tQuery 在 tquery.object3d.geometry.js 中为所有对象注册了rotateX、rotateY、rotateZ方法配合delta就能做出与帧率无关的匀速旋转world.hook(function(delta) { var degSecond delta * Math.PI / 180; object3d.rotateY(45 * degSecond); // 每秒转 45 度 object3d.rotateZ(45 * degSecond); });把角度乘以delta是关键无论设备帧率是 30fps 还是 60fps转速都能保持一致。完整的可运行示例可以参考 plugins/wobble/examples/index.html它同时演示了旋转与几何体变形叠加的效果。技巧 3位移动画——用 position 让物体沿路径移动旋转之外位移是让场景活起来的第二大利器。tQuery 的对象提供了position的链式 setter你可以结合now时间参数让物体沿正弦曲线等路径平滑移动world.hook(function(delta, now) { object3d.position(Math.sin(now * 2) * 2, 1, 0); // 左右往返移动 });用now累计秒数作为变量物体的运动轨迹会非常平滑、可预测是制作巡逻、摆动、循环路径的快捷方式。配合相机跟随甚至能做出赛车式的镜头运动效果。技巧 4弹性动画——Tween 补间与 Bounce 缓动想要弹一下的果冻质感tQuery 的补间插件 tquery.tween.js 封装了流行的 Tween 动画库。先开启全局补间更新器再创建 Tween 即可world.enableTweenUpdater(); // 自动把 TWEEN.update() 挂进渲染循环然后创建一个带缓动函数的补间Bounce.Out就能产生经典的弹性落地效果var tween tQuery.createTween({ scale: 1 }) .to({ scale: 4 }, 800) .easing(TWEEN.Easing.Bounce.Out) .onUpdate(function() { object.scale(this.scale); }) .start();更妙的是thenBounce()它会自动生成一个返回原状态的补间并链到当前补间之后让过去再弹回来只需一行代码。完整示例见 plugins/tween/examples/index.html。技巧 5顶点动画——让几何体自己呼吸如果想让模型表面像水波、旗帜一样变形就需要顶点级别的动画。tQuery 的 tquery.geometry.vertexanimation.js 插件提供了vertexAnimation方法你只需提供一个 transform 变换函数object.geometry().vertexAnimation({ transform: function(originPos, actualPos, now) { var angle now * 2 actualPos.y * 10; actualPos.x originPos.x Math.cos(angle) * 0.1; // 顶点横向波动 } });插件会自动保存每个顶点的原始位置并在每一帧调用你的 transform 函数重新计算顶点坐标实现波浪、飘动、呼吸等有机动画。同类的还有 tquery.geometry.wobble.js一行.wobble()就能让球体表面起伏做果冻球特效非常顺手。技巧 6关键帧动画——像幻灯片一样编排动作当动画变得复杂比如角色多个动作串联关键帧系统是更好的选择。tQuery 的 tquery.animation.js 提供了类似幻灯片的关键帧 API用pushKeyframe依次登记每个关键帧的时长与属性值启动后自动线性插值var anim tQuery.createAnimation(); anim.pushKeyframe(1, { x: 0, y: 0 }) .pushKeyframe(1, { x: 5, y: 2 }) // 第二秒跳到 (5,2) .pushKeyframe(1, { x: 0, y: 0 }); // 第三秒回到原点 anim.onUpdate(function(p) { object.position(p.x, p.y, 0); }); anim.start(); // 循环播放你可以通过onCapture捕获动画起始状态、用propertyTweens为每个属性定制插值函数自由度很高。角色动画的完整范例见 plugins/minecraft/examples/animation.html以及 tquery.animations.js 中预置的挥手、跳跃等动作集。把 6 个技巧组合起来技巧之间并不互斥你可以自由叠加用关键帧驱动角色位移同时用 Tween 弹性动画表现落地缓冲再用顶点动画让披风飘动——tQuery 的链式 API 让这一切可以优雅地串联。常用的创建工具都在 tquery.core.create.js 中createSphere、createTorus、createCube开箱即用。想动手实践克隆仓库即可获得全部源码与 60 个插件示例git clone https://gitcode.com/gh_mirrors/tq/tquery从world.hook()的第一行代码开始你会发现 three.js 动画入门远比想象中简单。祝你早日做出第一个会旋转、会弹跳、会呼吸的 3D 世界【免费下载链接】tqueryextension system for three.js项目地址: https://gitcode.com/gh_mirrors/tq/tquery创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考