图形学3D渲染【免费下载链接】spritejsA cross platform high-performance graphics system.项目地址https://gitcode.com/gh_mirrors/sp/spritejs点击查看免费下载SpriteJS 官方文档中的 examples 示例页 是理解这套跨平台高性能图形系统最快的人口它以分组画廊的形式将全部官方 Demo 划分为 Basic基础 2D、D3.js数据可视化、Proton.js粒子系统、Ext3D三维渲染四大板块。本文将以该文档为骨架逐项解析每个 Demo 的技术看点并对照仓库中 demos 目录 的真实源码config.jsindex.js说明其实现要点帮助你快速定位适合自己的示例作为上手或移植的起点。示例体系总览examples 页、demos 源码与构建产物先厘清三层关系后续阅读示例代码时就能对号入座文档入口docs/zh-cn/examples.md 是 docsify 侧边栏中「例子」一节的页面页面内通过ul classdemos列表渲染卡片式导航每张卡片由缩略图 名称 路由链接/demo/#...组成并带有data-nosearch属性以避免被全文搜索干扰。示例源码demos/ 目录是每个 Demo 的源码所在典型结构是config.jsindex.js部分含index.html、style.css。config.js统一采用 webpackraw-loader拉取同目录资源返回{javascript, html, css, packages}给演示平台注入渲染。以 demos/quick_start/config.js 为例export default async () { const [html, javascript, css] await Promise.all([ import(!raw-loader!~/index.html), import(!raw-loader!./index.js), import(!raw-loader!~/style.css), ]); return { javascript, html: { code: html }, css: { code: css }, packages: { js: [] } }; };构建产物与可直开页面docs/demo/ 目录存放构建后的演示站点资源runtime~index.bundle.js、spritejs.js、spritejs.es.js等打包文件即/demo/#...路由对应的运行时而 examples/ 目录下还有一批可直接在浏览器打开的单页 HTML 示例如 examples/quick_start.html、examples/d3_map.html适合不搭构建工具直接看效果。所有 Demo 的公共骨架都在 demos/quick_start/index.js 中体现在#stage容器上创建Scene调用scene.layer()分层、scene.preload()预加载纹理、layer.append()挂载精灵最后通过spritejs全局对象或import * as spritejs from spritejs访问 Scene、Sprite、Label、Group、Path 等类。安装与引入方式详见 快速入门npm install spritejs浏览器可用 CDN 版本Node 端需配合 node-canvas。Basic 基础示例Basic 板块覆盖了 SpriteJS 2D 渲染的核心能力共 13 个示例是对基础 API 的最佳演示。quick start快速上手示例源码 演示了完整的多图层 动画链路创建 1200×1200 的Scene用scene.layer(bg)与scene.layer(fg)分出背景层与前景层handleEvent: false关闭事件以提升性能背景层绘制带borderRadius的圆角Sprite舞台前景层挂载以texture: guanguan1.png初始化的机器人精灵。随后用一连串await robot.animate([...], {...}).finished串起「走路动画easing: step-end的逐帧换纹理、下落ease-in、横移ease-in-out、原地转身direction: alternateiterations: 2、循环行走」等动作最后while(1)无限重放。它直观展示了animate()返回对象的finishedPromise 与attr({pos, anchor, scale, transformOrigin})的变换写法。basic sprites基础精灵示例源码 展示了用多个Sprite拼装角色并分层动画head/neck/body/leftArm/rightArm 五个精灵通过pos与zIndex组合成人偶依次以delay间隔做「下坠落地」动画body → leftArm → rightArm → neck → head随后combine()/stretch()两组函数在mouseenter/mouseleave事件触发下往复「伸长-收回」。注意其中layer.canvas.style.backgroundColor直接设置画布背景色这是跨实现都生效的通用写法。path groups路径与分组示例源码 是本板块信息量最大的一个先用 SVG 风格的路径串M... C...构造Path柠檬外轮廓与半透明投影opacity: 0.05再用Group聚合 12 个三角形Path拼成旋转柠檬lemonGroup.animate([{rotate: 360}], {duration: 10000, iterations: Infinity})做无限旋转同时演示了通过layer.timeline.playbackRate 3.0 / 1.0在鼠标悬停时加速/恢复全局时间轴——这是 SpriteJS 时间轴控制的经典用法。labels文字标签示例源码 展示了Label的基础使用new Label(Hello World !)设置font: bold 48px Arial与fillColor两个 Label 放入Group后对Group整体做scale/rotate交替动画direction: alternate无限往返体现「分组变换 文字渲染」的组合。button按钮示例源码 用Label常态文字Sprite悬停高亮块实现完整交互按钮mouseenter时高亮块从宽 96 动画扩展到 324ease-in300msmouseleave收回ease-out500ms并针对移动端处理了touchstart/touchend与鼠标事件的冲突touched标记、mousedown/mouseup的按压缩放scale: 0.9 / 1.0与click回调。代码中的注释还列出了移动端事件触发顺序是处理跨端交互的实用参考。transforms变换示例源码 用 5 个按钮translate/rotate/scale/skew/stop逐一演示变换属性动画{translate: [0, -100]}位移、{rotate: 360}旋转、含scale: [0, 1]、scale: [-1, 1]的镜像缩放序列、{skew: [0, 30]}斜切以及animation.cancel()的中止控制。注意这里的按钮是继承Label的子类在connect(parent, zOrder)钩子里批量注册mouseenter/mousedown/mouseup/mouseleave事件——这是自定义可复用精灵的推荐姿势。events事件示例源码 把事件模型玩到了极致虚拟键盘上的KeyButtonLabel子类同时监听keydown/mousedown/touchstart与keyup/mouseup/touchenddocument层监听物理键盘把event.key转成button.dispatchEvent(event)派发回虚拟按键人物huanhuan平时做悬浮扑翼动画{translate: [8.5, 10]} → {translate: [-8.5, -10]}交替按下 W/A/S/D 时暂停扑翼、按duration Math.abs(10 * (y - destY))等比例时长移动松开后flapping.play()恢复。涉及animation.pause()/play()/cancel(true)的完整生命周期管理。filters滤镜示例源码 用generateSpriteWithFilter()工厂函数一口气演示了与 CSS3 同名同参数的全部滤镜drop-shadow(2px, 2px, 10px, #FF6040)、blur(4px)、brightness(50%)、contrast(200%)、grayscale(100%)、hue-rotate(90deg)、invert(75%)、opacity(0.25)、saturate(30%)、sepia(100%)同时展示了textureRect: [50, 40, 180, 220]截取纹理局部区域的用法。滤镜参数的解析与渲染在 src/utils/filter.js 中实现相关测试见 test/utils/filter.test.js。animations动画控制示例源码 是动画综合场10 只喷火小鸟Group包裹Sprite(huanhuan.png) 内外两层Path火焰各自随机时长飞行并通过iterations: Infinity无限往返右侧 4 个控制按钮直接操作fglayer.timeline.playbackRateSpeed up 0.2、Slow down- 0.2、Pause 0、Play 1另有一个Label每 100ms 刷新显示实时速率。它证明时间轴是图层级的全局属性可以整体加速/暂停所有元素动画。svg pathSVG 路径形变示例源码 演示Path的路径插值形变morph为内外两层火焰各准备 4 段同构的d路径串target.animate([{d: from}, {d: to}], {duration: 600})逐个形变并循环。配合scale: 4 / 3放大与fillColor着色就实现了与 pasition 类库同款的火苗摇曳效果是矢量路径动画的代表作。offset api偏移路径动画示例源码 演示 CSS Motion Path 语义的沿路径运动先绘制一条作为辅助线的Path黄色描边再让Sprite设置offsetPath: d与辅助线同一路径串然后animate([{offsetDistance: 0}, {offsetDistance: 1}], {duration: 8000, direction: alternate, iterations: Infinity})沿路径来回巡游第二条动画用offsetRotate: auto/reverse控制精灵沿路径自动转向配合scale: [0.2, -0.2]实现掉头时的镜像翻转。groups分组示例源码 结合dat.GUI演示对象树的按名查询给Group与内部精灵设置name属性通过layer.getElementsByName(val)/group.getElementsByName(val)动态切换被控制对象GUI 滑条直接改写目标元素的x/y属性。它说明元素name 查询 APIsrc/selector/index.js是管理大量节点的利器。ray光线示例源码 结合Animator与Gradient实现随机光柱特效每次生成一条二次贝塞尔PathM10,80 q${controller},-80 350,0new Animator(3000, p {...})中根据进度p构造动态Gradient渐变描边并调用s.getPathLength()/s.getPointAtLength()计算路径采样点最后s.remove()自清理。这是「外部时钟驱动 程序化渐变色」的进阶示例。缩略图参考Basic 基础示例效果D3.js 数据可视化示例SpriteJS 的对象树结构与 d3 引擎天然友好官方特性 明确列出「对 d3 引擎友好能够无缝使用」核心技巧是d3.select(layer)直接选择图层再用append(sprite/path/label)以 d3 的数据驱动模式批量创建精灵。bar graph柱状图示例源码 是入门 d3 集成的最短路径d3.select(fglayer)后selectAll(sprite).data(dataset).enter().append(sprite)批量生成柱体chart.transition().duration(2000).attr(width, d scale(d)).attr(bgcolor, ...)用 d3 transition 完成入场动画坐标轴用SpriteSvg承载new SpriteSvg({x, y})d3.select(axisNode.svg).append(g).call(d3.axisBottom(scale))注释中还保留了 3.4 之前把 SVG 轴转成 Blob 纹理的旧方案对比。hierarchy层级关系图示例源码 用d3.hierarchy d3.pack生成圆形打包图把每个节点渲染成label元素pos/size/bgcolor/borderRadius均由数据回调决定字号按Math.log2(d.value)缩放text只在叶子节点显示名称mousemove时高亮border: [3, red]并把名称写入顶部 Labelmouseleave清除——体现「d3 数据绑定 SpriteJS 渲染」的配合。map地图示例源码 演示 GeoJSON 地图渲染d3.geoMercator()投影 d3.geoPath()生成路径串append(path).attr(d, path)直接绘制各省轮廓click打印d.properties.namemouseenter/mouseleave切换fillColor。渲染效果可参考 examples/d3_map.html 与缩略图links力导向关系图示例源码 把d3.forceSimulation的节点/连线映射为sprite与pathtick回调中更新每条连线d与每个节点pos后手动layer.render()图层以autoRender: false关闭自动渲染以配合 d3 帧循环拖拽通过d3.drag()layer.toLocalPos(d3.event.x, d3.event.y)把屏幕坐标换算为图层局部坐标实现是「外部引擎驱动 手动合帧」的典型模式。map centroid地图质心缩放示例源码 用d3.geoAlbersUsa() topojson 绘制美国各州点击某州时用path.centroid(d)求质心再d3.select(layer).selectAll(path).transition().duration(750).attr(pos, ...)平移整个图层完成「点击聚焦」效果。map search地图搜索钻取示例源码 是 D3 板块最复杂的实战项目构建World类实现多级地图钻取。MapLoader按/assets/mapdata/${mapId}.json加载仓库 docs/assets/mapdata/ 下的地图数据并缓存getPath(destId)基于mapRelation的父子关系计算进出路径enter/leave方法用Animator对layer.attributes.transform矩阵插值实现「放大进入 / 缩小退出」的平滑过渡最后在页面顶部注入输入表单按地区名或 ID 搜索并world.moveTo(id)。它还示范了path.bounds()做视口外要素过滤、layer.getResolution()自适应等工程化细节。Proton.js 粒子系统示例Proton 是一个流行的 JavaScript 粒子引擎SpriteJS 通过ProtonRenderer(layer)把粒子直接渲染到图层上。5 个示例从入门到进阶展示了完整粒子工作流。circle particle圆形粒子示例源码 是最简粒子模板new Proton.Emitter()依次配置emitter.rate new Proton.Rate(Proton.getSpan(10, 20), 0.1)每 0.1 秒发射 10~20 个、addInitialize(Radius(1, 12))、Life(2, 4)、Velocity(3, Span(0, 360), polar)与Color(#ff0000, random)、Alpha(1, 0)行为设置emitter.p.x/y后emitter.emit(5)最后new ProtonRenderer(layer)挂进proton用requestAnimationFrame循环proton.update()。block particle块粒子与 custom behavior自定义行为behavior 示例源码 演示了两大进阶能力一是轨迹残留——用new Block()以半透明bgcolor蒙层覆盖图层并重写renderer.onProtonUpdate钩子在每帧绘制蒙层与layer.render({clear: false})形成拖尾效果二是自定义行为——手写{initialize(particle), applyBehaviour(particle)}结构的circleBehaviour/rouletteBehaviour用内外摆线参数方程驱动粒子画出旋转花环轨迹行为结束后自动changeBehaviour()切换到下一行为同时Color.parse(hsl(...))每 100ms 轮换颜色。block 示例demos/protonjs/block/则聚焦 Block 元素在粒子场景中的使用。big fire大火示例源码 展示纹理粒子与混合模式先loadImage异步加载火花贴图new Sprite({texture: image})作为粒子外观addInitialize(new Proton.Body(sprite))发射源用CircleZone圆形区域关键一行是gl.blendFunc(gl.ONE, gl.ONE)——直接操作layer.renderer.glRenderer.gl切换为叠加混合让密集粒子产生炽热发光效果再配合Scale(1, 0.2)、Alpha(1, 0.2)衰减。bg particles背景粒子示例源码 是综合性最强的一个双层图层bglayer负责粒子、fglayer是contextType: 2d的叠加层粒子以Arc({radius: 5})圆形几何体为外观RectZone全屏随机出生并CrossZone边界回收renderer.onProtonUpdateAfter钩子里用 2D context 在两两粒子距离小于 R 时画连线经典的「星空连线」效果鼠标按下时emitter.emit(once)定向爆喷、移动时粒子平滑跟随p0.p.x (e.x - p0.p.x) * ease。示例还演示了scene.addEventListener(resize, ...)配合_.debounce的响应式重排。Ext3D 三维渲染示例Ext3D 是 SpriteJS 的 3D 扩展用法见 3D 扩展文档通过scene.layer3d()创建 3D 图层从spritejs.ext3d引入几何体、着色器与相机。examples 页列出 13 个三维示例涵盖从立方体到 GPGPU 的全链路。3D Cube三维立方体示例源码 是最短的三维起步代码scene.layer3d(fglayer, {camera: {fov: 35, pos: [3, 3, 5]}})配置相机视野与位置layer.createProgram({...shaders.NORMAL_GEOMETRY, cullFace: null})用内置法线着色器创建程序new Cube(program, {colors: red red blue blue green green})六面着色后layer.append(cube)最后layer.setOrbit()一行开启鼠标轨道控制。效果见缩略图Camera相机与视锥剔除示例源码 展示了自定义 GLSL 着色器与视锥剔除vertex/fragment内联着色器实现树木的雾效与高度淡出layer.loadModel()加载 JSON 模型后批量new Mesh3d生成 400 棵随机旋转缩放的树随后创建第二个Camerafov: 65, far: 10并把Cylinder相机模型挂载其上在layer.tick()中驱动相机沿cameraPath移动、lookAt追踪目标逐帧updateFrustum()后layer.traverse(node node.attributes.display frustumCamera.frustumIntersects(node) ? : none)做视锥内/外可见性切换——这是性能优化的标准示范。其余三维示例一览其余 11 个示例覆盖 Ext3D 的各个进阶主题均可在 demos/3d/ 对应子目录找到源码并与 3D 扩展进阶文档 一一对应示例主题对应文档cubemap立方体贴图环境ext3d 文档pbr基于物理的渲染着色器 / 渲染模式geometry / geometry3基础几何体与模型几何体绘制几何体model_texture模型加载与贴图模型 / 文字group33D 分组分组skydome天空穹顶着色器video视频纹理模型shadow阴影阴影post后期处理通道后期处理通道gpgpu通用 GPU 计算通用GPU另外 examples.md 中被注释掉的OBB Hit与Matter.js mixed shapes表明曾规划 OBB 碰撞检测与物理引擎集成示例目前尚未开放可作为后续版本的关注点。从示例到实战推荐的探索路线结合 快速入门文档 与上面的示例矩阵给出三条递进路径2D 入门先跑 quick_start 与 basic_sprites 建立Scene/Layer/Sprite/attr/animate心智模型再对照 block 元素、路径元素、过渡与动画、事件 文档逐项深化需要交互 UI 时参考 button 与 events 的事件处理模式。数据可视化从 d3/bar 起步掌握d3.select(layer)的接入方式再依次攻 map静态地理、links力导向 手动合帧、map_search多级地图钻取 矩阵过渡即可支撑大多数 dashboard 需求相关最佳实践可参考 与 d3 一同使用。特效与三维粒子特效从 protonjs/circle 起手进阶残留与自定义行为看 behavior叠加混合看 fire三维从 3d/basic 起步性能优化看 camera2 的视锥剔除并配合 3D 扩展 全篇文档使用。示例代码同时是仓库内部 API 的最佳「活文档」需要确认某个类或属性的行为时直接在对应示例的 index.js 里搜索用法再跳转 API 速查文档 或源码如 src/node/sprite.js、src/animation/index.js验证细节。按这条路线走你就能从「看示例」平滑过渡到「写自己的 SpriteJS 应用」。赞分享图形学3D渲染【免费下载链接】spritejsA cross platform high-performance graphics system.项目地址https://gitcode.com/gh_mirrors/sp/spritejs点击查看免费下载相关推荐SpriteJS 官方示例全览从 Basic 基础元素到 D3 可视化、Proton 粒子与 Ext3D 三维渲染SpriteJS 官方示例全览从 Basic 基础元素到 D3 可视化、Proton 粒子与 Ext3D 三维渲染 本文以 SpriteJS 官方示例画廊图形学3D渲染Platypus新手指南三步把脚本变成可双击运行的macOS应用Platypus新手指南三步把脚本变成可双击运行的macOS应用 你写了一个批处理脚本自己在终端里跑得顺可同事打不开终端你又不想一步步教。Platypu开发工具SpriteJS 3D 扩展库使用教程从基础模型到复杂场景SpriteJS 3D 扩展库使用教程从基础模型到复杂场景 SpriteJS 3D 扩展库是一个跨平台高性能图形系统为开发者提供了创建惊艳3D场景的强大工具图形学3D渲染上一篇DataHub Redshift 采集权限配置实战DataHub 用户创建与系统表授权详解下一篇OpenCore Legacy Patcher技术揭秘深度探索老Mac升级方案与非官方系统兼容性创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SpriteJS 示例全解析：从基础精灵到 D3、粒子与 3D 渲染的 Demo 导航
图形学3D渲染【免费下载链接】spritejsA cross platform high-performance graphics system.项目地址https://gitcode.com/gh_mirrors/sp/spritejs点击查看免费下载SpriteJS 官方文档中的 examples 示例页 是理解这套跨平台高性能图形系统最快的人口它以分组画廊的形式将全部官方 Demo 划分为 Basic基础 2D、D3.js数据可视化、Proton.js粒子系统、Ext3D三维渲染四大板块。本文将以该文档为骨架逐项解析每个 Demo 的技术看点并对照仓库中 demos 目录 的真实源码config.jsindex.js说明其实现要点帮助你快速定位适合自己的示例作为上手或移植的起点。示例体系总览examples 页、demos 源码与构建产物先厘清三层关系后续阅读示例代码时就能对号入座文档入口docs/zh-cn/examples.md 是 docsify 侧边栏中「例子」一节的页面页面内通过ul classdemos列表渲染卡片式导航每张卡片由缩略图 名称 路由链接/demo/#...组成并带有data-nosearch属性以避免被全文搜索干扰。示例源码demos/ 目录是每个 Demo 的源码所在典型结构是config.jsindex.js部分含index.html、style.css。config.js统一采用 webpackraw-loader拉取同目录资源返回{javascript, html, css, packages}给演示平台注入渲染。以 demos/quick_start/config.js 为例export default async () { const [html, javascript, css] await Promise.all([ import(!raw-loader!~/index.html), import(!raw-loader!./index.js), import(!raw-loader!~/style.css), ]); return { javascript, html: { code: html }, css: { code: css }, packages: { js: [] } }; };构建产物与可直开页面docs/demo/ 目录存放构建后的演示站点资源runtime~index.bundle.js、spritejs.js、spritejs.es.js等打包文件即/demo/#...路由对应的运行时而 examples/ 目录下还有一批可直接在浏览器打开的单页 HTML 示例如 examples/quick_start.html、examples/d3_map.html适合不搭构建工具直接看效果。所有 Demo 的公共骨架都在 demos/quick_start/index.js 中体现在#stage容器上创建Scene调用scene.layer()分层、scene.preload()预加载纹理、layer.append()挂载精灵最后通过spritejs全局对象或import * as spritejs from spritejs访问 Scene、Sprite、Label、Group、Path 等类。安装与引入方式详见 快速入门npm install spritejs浏览器可用 CDN 版本Node 端需配合 node-canvas。Basic 基础示例Basic 板块覆盖了 SpriteJS 2D 渲染的核心能力共 13 个示例是对基础 API 的最佳演示。quick start快速上手示例源码 演示了完整的多图层 动画链路创建 1200×1200 的Scene用scene.layer(bg)与scene.layer(fg)分出背景层与前景层handleEvent: false关闭事件以提升性能背景层绘制带borderRadius的圆角Sprite舞台前景层挂载以texture: guanguan1.png初始化的机器人精灵。随后用一连串await robot.animate([...], {...}).finished串起「走路动画easing: step-end的逐帧换纹理、下落ease-in、横移ease-in-out、原地转身direction: alternateiterations: 2、循环行走」等动作最后while(1)无限重放。它直观展示了animate()返回对象的finishedPromise 与attr({pos, anchor, scale, transformOrigin})的变换写法。basic sprites基础精灵示例源码 展示了用多个Sprite拼装角色并分层动画head/neck/body/leftArm/rightArm 五个精灵通过pos与zIndex组合成人偶依次以delay间隔做「下坠落地」动画body → leftArm → rightArm → neck → head随后combine()/stretch()两组函数在mouseenter/mouseleave事件触发下往复「伸长-收回」。注意其中layer.canvas.style.backgroundColor直接设置画布背景色这是跨实现都生效的通用写法。path groups路径与分组示例源码 是本板块信息量最大的一个先用 SVG 风格的路径串M... C...构造Path柠檬外轮廓与半透明投影opacity: 0.05再用Group聚合 12 个三角形Path拼成旋转柠檬lemonGroup.animate([{rotate: 360}], {duration: 10000, iterations: Infinity})做无限旋转同时演示了通过layer.timeline.playbackRate 3.0 / 1.0在鼠标悬停时加速/恢复全局时间轴——这是 SpriteJS 时间轴控制的经典用法。labels文字标签示例源码 展示了Label的基础使用new Label(Hello World !)设置font: bold 48px Arial与fillColor两个 Label 放入Group后对Group整体做scale/rotate交替动画direction: alternate无限往返体现「分组变换 文字渲染」的组合。button按钮示例源码 用Label常态文字Sprite悬停高亮块实现完整交互按钮mouseenter时高亮块从宽 96 动画扩展到 324ease-in300msmouseleave收回ease-out500ms并针对移动端处理了touchstart/touchend与鼠标事件的冲突touched标记、mousedown/mouseup的按压缩放scale: 0.9 / 1.0与click回调。代码中的注释还列出了移动端事件触发顺序是处理跨端交互的实用参考。transforms变换示例源码 用 5 个按钮translate/rotate/scale/skew/stop逐一演示变换属性动画{translate: [0, -100]}位移、{rotate: 360}旋转、含scale: [0, 1]、scale: [-1, 1]的镜像缩放序列、{skew: [0, 30]}斜切以及animation.cancel()的中止控制。注意这里的按钮是继承Label的子类在connect(parent, zOrder)钩子里批量注册mouseenter/mousedown/mouseup/mouseleave事件——这是自定义可复用精灵的推荐姿势。events事件示例源码 把事件模型玩到了极致虚拟键盘上的KeyButtonLabel子类同时监听keydown/mousedown/touchstart与keyup/mouseup/touchenddocument层监听物理键盘把event.key转成button.dispatchEvent(event)派发回虚拟按键人物huanhuan平时做悬浮扑翼动画{translate: [8.5, 10]} → {translate: [-8.5, -10]}交替按下 W/A/S/D 时暂停扑翼、按duration Math.abs(10 * (y - destY))等比例时长移动松开后flapping.play()恢复。涉及animation.pause()/play()/cancel(true)的完整生命周期管理。filters滤镜示例源码 用generateSpriteWithFilter()工厂函数一口气演示了与 CSS3 同名同参数的全部滤镜drop-shadow(2px, 2px, 10px, #FF6040)、blur(4px)、brightness(50%)、contrast(200%)、grayscale(100%)、hue-rotate(90deg)、invert(75%)、opacity(0.25)、saturate(30%)、sepia(100%)同时展示了textureRect: [50, 40, 180, 220]截取纹理局部区域的用法。滤镜参数的解析与渲染在 src/utils/filter.js 中实现相关测试见 test/utils/filter.test.js。animations动画控制示例源码 是动画综合场10 只喷火小鸟Group包裹Sprite(huanhuan.png) 内外两层Path火焰各自随机时长飞行并通过iterations: Infinity无限往返右侧 4 个控制按钮直接操作fglayer.timeline.playbackRateSpeed up 0.2、Slow down- 0.2、Pause 0、Play 1另有一个Label每 100ms 刷新显示实时速率。它证明时间轴是图层级的全局属性可以整体加速/暂停所有元素动画。svg pathSVG 路径形变示例源码 演示Path的路径插值形变morph为内外两层火焰各准备 4 段同构的d路径串target.animate([{d: from}, {d: to}], {duration: 600})逐个形变并循环。配合scale: 4 / 3放大与fillColor着色就实现了与 pasition 类库同款的火苗摇曳效果是矢量路径动画的代表作。offset api偏移路径动画示例源码 演示 CSS Motion Path 语义的沿路径运动先绘制一条作为辅助线的Path黄色描边再让Sprite设置offsetPath: d与辅助线同一路径串然后animate([{offsetDistance: 0}, {offsetDistance: 1}], {duration: 8000, direction: alternate, iterations: Infinity})沿路径来回巡游第二条动画用offsetRotate: auto/reverse控制精灵沿路径自动转向配合scale: [0.2, -0.2]实现掉头时的镜像翻转。groups分组示例源码 结合dat.GUI演示对象树的按名查询给Group与内部精灵设置name属性通过layer.getElementsByName(val)/group.getElementsByName(val)动态切换被控制对象GUI 滑条直接改写目标元素的x/y属性。它说明元素name 查询 APIsrc/selector/index.js是管理大量节点的利器。ray光线示例源码 结合Animator与Gradient实现随机光柱特效每次生成一条二次贝塞尔PathM10,80 q${controller},-80 350,0new Animator(3000, p {...})中根据进度p构造动态Gradient渐变描边并调用s.getPathLength()/s.getPointAtLength()计算路径采样点最后s.remove()自清理。这是「外部时钟驱动 程序化渐变色」的进阶示例。缩略图参考Basic 基础示例效果D3.js 数据可视化示例SpriteJS 的对象树结构与 d3 引擎天然友好官方特性 明确列出「对 d3 引擎友好能够无缝使用」核心技巧是d3.select(layer)直接选择图层再用append(sprite/path/label)以 d3 的数据驱动模式批量创建精灵。bar graph柱状图示例源码 是入门 d3 集成的最短路径d3.select(fglayer)后selectAll(sprite).data(dataset).enter().append(sprite)批量生成柱体chart.transition().duration(2000).attr(width, d scale(d)).attr(bgcolor, ...)用 d3 transition 完成入场动画坐标轴用SpriteSvg承载new SpriteSvg({x, y})d3.select(axisNode.svg).append(g).call(d3.axisBottom(scale))注释中还保留了 3.4 之前把 SVG 轴转成 Blob 纹理的旧方案对比。hierarchy层级关系图示例源码 用d3.hierarchy d3.pack生成圆形打包图把每个节点渲染成label元素pos/size/bgcolor/borderRadius均由数据回调决定字号按Math.log2(d.value)缩放text只在叶子节点显示名称mousemove时高亮border: [3, red]并把名称写入顶部 Labelmouseleave清除——体现「d3 数据绑定 SpriteJS 渲染」的配合。map地图示例源码 演示 GeoJSON 地图渲染d3.geoMercator()投影 d3.geoPath()生成路径串append(path).attr(d, path)直接绘制各省轮廓click打印d.properties.namemouseenter/mouseleave切换fillColor。渲染效果可参考 examples/d3_map.html 与缩略图links力导向关系图示例源码 把d3.forceSimulation的节点/连线映射为sprite与pathtick回调中更新每条连线d与每个节点pos后手动layer.render()图层以autoRender: false关闭自动渲染以配合 d3 帧循环拖拽通过d3.drag()layer.toLocalPos(d3.event.x, d3.event.y)把屏幕坐标换算为图层局部坐标实现是「外部引擎驱动 手动合帧」的典型模式。map centroid地图质心缩放示例源码 用d3.geoAlbersUsa() topojson 绘制美国各州点击某州时用path.centroid(d)求质心再d3.select(layer).selectAll(path).transition().duration(750).attr(pos, ...)平移整个图层完成「点击聚焦」效果。map search地图搜索钻取示例源码 是 D3 板块最复杂的实战项目构建World类实现多级地图钻取。MapLoader按/assets/mapdata/${mapId}.json加载仓库 docs/assets/mapdata/ 下的地图数据并缓存getPath(destId)基于mapRelation的父子关系计算进出路径enter/leave方法用Animator对layer.attributes.transform矩阵插值实现「放大进入 / 缩小退出」的平滑过渡最后在页面顶部注入输入表单按地区名或 ID 搜索并world.moveTo(id)。它还示范了path.bounds()做视口外要素过滤、layer.getResolution()自适应等工程化细节。Proton.js 粒子系统示例Proton 是一个流行的 JavaScript 粒子引擎SpriteJS 通过ProtonRenderer(layer)把粒子直接渲染到图层上。5 个示例从入门到进阶展示了完整粒子工作流。circle particle圆形粒子示例源码 是最简粒子模板new Proton.Emitter()依次配置emitter.rate new Proton.Rate(Proton.getSpan(10, 20), 0.1)每 0.1 秒发射 10~20 个、addInitialize(Radius(1, 12))、Life(2, 4)、Velocity(3, Span(0, 360), polar)与Color(#ff0000, random)、Alpha(1, 0)行为设置emitter.p.x/y后emitter.emit(5)最后new ProtonRenderer(layer)挂进proton用requestAnimationFrame循环proton.update()。block particle块粒子与 custom behavior自定义行为behavior 示例源码 演示了两大进阶能力一是轨迹残留——用new Block()以半透明bgcolor蒙层覆盖图层并重写renderer.onProtonUpdate钩子在每帧绘制蒙层与layer.render({clear: false})形成拖尾效果二是自定义行为——手写{initialize(particle), applyBehaviour(particle)}结构的circleBehaviour/rouletteBehaviour用内外摆线参数方程驱动粒子画出旋转花环轨迹行为结束后自动changeBehaviour()切换到下一行为同时Color.parse(hsl(...))每 100ms 轮换颜色。block 示例demos/protonjs/block/则聚焦 Block 元素在粒子场景中的使用。big fire大火示例源码 展示纹理粒子与混合模式先loadImage异步加载火花贴图new Sprite({texture: image})作为粒子外观addInitialize(new Proton.Body(sprite))发射源用CircleZone圆形区域关键一行是gl.blendFunc(gl.ONE, gl.ONE)——直接操作layer.renderer.glRenderer.gl切换为叠加混合让密集粒子产生炽热发光效果再配合Scale(1, 0.2)、Alpha(1, 0.2)衰减。bg particles背景粒子示例源码 是综合性最强的一个双层图层bglayer负责粒子、fglayer是contextType: 2d的叠加层粒子以Arc({radius: 5})圆形几何体为外观RectZone全屏随机出生并CrossZone边界回收renderer.onProtonUpdateAfter钩子里用 2D context 在两两粒子距离小于 R 时画连线经典的「星空连线」效果鼠标按下时emitter.emit(once)定向爆喷、移动时粒子平滑跟随p0.p.x (e.x - p0.p.x) * ease。示例还演示了scene.addEventListener(resize, ...)配合_.debounce的响应式重排。Ext3D 三维渲染示例Ext3D 是 SpriteJS 的 3D 扩展用法见 3D 扩展文档通过scene.layer3d()创建 3D 图层从spritejs.ext3d引入几何体、着色器与相机。examples 页列出 13 个三维示例涵盖从立方体到 GPGPU 的全链路。3D Cube三维立方体示例源码 是最短的三维起步代码scene.layer3d(fglayer, {camera: {fov: 35, pos: [3, 3, 5]}})配置相机视野与位置layer.createProgram({...shaders.NORMAL_GEOMETRY, cullFace: null})用内置法线着色器创建程序new Cube(program, {colors: red red blue blue green green})六面着色后layer.append(cube)最后layer.setOrbit()一行开启鼠标轨道控制。效果见缩略图Camera相机与视锥剔除示例源码 展示了自定义 GLSL 着色器与视锥剔除vertex/fragment内联着色器实现树木的雾效与高度淡出layer.loadModel()加载 JSON 模型后批量new Mesh3d生成 400 棵随机旋转缩放的树随后创建第二个Camerafov: 65, far: 10并把Cylinder相机模型挂载其上在layer.tick()中驱动相机沿cameraPath移动、lookAt追踪目标逐帧updateFrustum()后layer.traverse(node node.attributes.display frustumCamera.frustumIntersects(node) ? : none)做视锥内/外可见性切换——这是性能优化的标准示范。其余三维示例一览其余 11 个示例覆盖 Ext3D 的各个进阶主题均可在 demos/3d/ 对应子目录找到源码并与 3D 扩展进阶文档 一一对应示例主题对应文档cubemap立方体贴图环境ext3d 文档pbr基于物理的渲染着色器 / 渲染模式geometry / geometry3基础几何体与模型几何体绘制几何体model_texture模型加载与贴图模型 / 文字group33D 分组分组skydome天空穹顶着色器video视频纹理模型shadow阴影阴影post后期处理通道后期处理通道gpgpu通用 GPU 计算通用GPU另外 examples.md 中被注释掉的OBB Hit与Matter.js mixed shapes表明曾规划 OBB 碰撞检测与物理引擎集成示例目前尚未开放可作为后续版本的关注点。从示例到实战推荐的探索路线结合 快速入门文档 与上面的示例矩阵给出三条递进路径2D 入门先跑 quick_start 与 basic_sprites 建立Scene/Layer/Sprite/attr/animate心智模型再对照 block 元素、路径元素、过渡与动画、事件 文档逐项深化需要交互 UI 时参考 button 与 events 的事件处理模式。数据可视化从 d3/bar 起步掌握d3.select(layer)的接入方式再依次攻 map静态地理、links力导向 手动合帧、map_search多级地图钻取 矩阵过渡即可支撑大多数 dashboard 需求相关最佳实践可参考 与 d3 一同使用。特效与三维粒子特效从 protonjs/circle 起手进阶残留与自定义行为看 behavior叠加混合看 fire三维从 3d/basic 起步性能优化看 camera2 的视锥剔除并配合 3D 扩展 全篇文档使用。示例代码同时是仓库内部 API 的最佳「活文档」需要确认某个类或属性的行为时直接在对应示例的 index.js 里搜索用法再跳转 API 速查文档 或源码如 src/node/sprite.js、src/animation/index.js验证细节。按这条路线走你就能从「看示例」平滑过渡到「写自己的 SpriteJS 应用」。赞分享图形学3D渲染【免费下载链接】spritejsA cross platform high-performance graphics system.项目地址https://gitcode.com/gh_mirrors/sp/spritejs点击查看免费下载相关推荐SpriteJS 官方示例全览从 Basic 基础元素到 D3 可视化、Proton 粒子与 Ext3D 三维渲染SpriteJS 官方示例全览从 Basic 基础元素到 D3 可视化、Proton 粒子与 Ext3D 三维渲染 本文以 SpriteJS 官方示例画廊图形学3D渲染Platypus新手指南三步把脚本变成可双击运行的macOS应用Platypus新手指南三步把脚本变成可双击运行的macOS应用 你写了一个批处理脚本自己在终端里跑得顺可同事打不开终端你又不想一步步教。Platypu开发工具SpriteJS 3D 扩展库使用教程从基础模型到复杂场景SpriteJS 3D 扩展库使用教程从基础模型到复杂场景 SpriteJS 3D 扩展库是一个跨平台高性能图形系统为开发者提供了创建惊艳3D场景的强大工具图形学3D渲染上一篇DataHub Redshift 采集权限配置实战DataHub 用户创建与系统表授权详解下一篇OpenCore Legacy Patcher技术揭秘深度探索老Mac升级方案与非官方系统兼容性创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考