特效
2026年8月20日大约 6 分钟
特效（3 种）
粒子特效（火焰 / 烟雾 / 雨雪 / 烟花 / 文字聚字）、序列帧精灵动画与 Lottie 矢量动画。粒子为引擎预设，零素材可用；序列帧与 Lottie 需自备贴图 / JSON 素材。
元素都放在
scene-3d组件的pieces里，按{ uid, type, options }描述；坐标是世界坐标（场景单位），角度用度（°）。下方每节给出用途、在线预览、全量属性表与可复制 JSON。测点驱动三件套（data-key+state-rules+blink-values）见测点数据驱动，触发器与动作见播放态交互。
在线预览按需加载
三维每个场景独占一个 GPU 上下文（引擎侧同页实例配额为 4），故本页预览默认不自动运行——点「加载在线预览」才建场景，同页只保留一个活跃预览（打开新的会自动关掉上一个）。预览用 vjmap 官方公开服务，联网即可出图。
粒子特效 scene3d-particle
粒子特效：火焰 / 烟雾 / 下雨 / 下雪 / 烟花 / 文字聚字六类内置预设，另可粘贴引擎 particle.toJSON() 自定义。零素材离线可用。
预览即
data/三维/元素/06-particle-粒子特效.vpproj.json的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。
属性
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
fx-kind | 类型 | select | fire | 可选：fire / smoke / rain / snow / firework / text / preset / custom |
position | 位置 | vector<X,Y,Z> | [0,0,0] | |
preset-name | 预设 | select | explosion | 可选：explosion / fireball-explosion / nuke-energy-explosion / blue-gas-explosion / fat-bullet-explosion / frost-missile-explosion / lightning-ball / lightning-ball-with-bloom / lightning-ball-explosion / purple-lightning-strike / soft-lightning-strike / purple-blast-fireworks / confetti-blast / BubbleExplosion / cartoon-bang / cartoon-energy-explosion / cartoon-magic-zone / player-aura / big-green-healing-effect / heal-stream-effect / levelup-nova-effect / character-stun-effect / atom / star-field / soft-candlelight / blue-flamethrower / blue-flare / bomb-fuse / energy-nuke-muzzle-flash / fat-bullet-muzzle-flash / frost-missile / frost-missile-muzzle-flash / falling-leaves / dollar-bill-shower / blood-splash / happy-face-emoji / emoji-cry / emoji-evil-laugh / emoji-kiss / emoji-nervous |
preset-url-base | 资源地址 | string | — | |
preset-loop | 循环播放 | boolean | true | |
fx-text | 文字内容 | string | 智慧大屏 | |
fx-text-height | 文字高度 | slider(min=0.5,max=10,step=0.1) | 2.4 | |
fx-text-cycle | 循环周期 | slider(min=3,max=30,step=1,unit=s) | 7 | |
fx-intensity | 强度 | slider(min=0.1,max=3,step=0.1) | 1 | |
fx-size | 粒子大小 | slider(min=0.1,max=3,step=0.1) | 1 | |
fx-range | 覆盖范围 | number(min=0.5,step=1) | 12 | |
fx-color | 颜色 | color | — | |
fx-json-url | JSON 地址 | string | — | |
fx-json | 粒子 JSON | string(textarea,rows=6) | — | |
row-row-filter-mode-id | 选择数据规则 | select(condition) | — |
JSON 片段
{
"uid": "fx_fire",
"type": "scene3d-particle",
"options": {
"fx-kind": "fire",
"position": [
-10,
0.5,
2
],
"fx-intensity": 1.4,
"fx-size": 1.2
}
}序列帧动画 scene3d-spriteanim
序列帧动画：横向等分 PNG / WebP 条带或 TexturePacker 图集逐帧播放成动画贴片，测点可切换帧动画（如 idle / run / alarm 三套动作）。
预览即
data/三维/元素/36-spriteanim-序列帧动画.vpproj.json的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。
属性
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
sheet-url | 精灵图 | file(format=image,accept=jpg|jpeg|png|webp) | — | |
atlas-url | 图集 JSON | string | — | |
frames | 帧数 | number(min=1,max=1024,step=1) | 16 | |
frame-name | 初始动画名 | string | — | |
fps | 帧率 | slider(min=1,max=60,step=1,unit=fps) | 24 | |
autoplay | 自动播放 | boolean | true | |
loop | 循环播放 | boolean | true | |
flip-x | 水平翻转 | boolean | false | |
as-sprite | 公告牌（面向相机） | boolean | true | |
glow | 辉光 | boolean | false | |
position | 位置 | vector<X,Y,Z> | [0,1,0] | |
rotation | 旋转 | vector<X,Y,Z>(unit=°) | [0,0,0] | |
sprite-scale | 大小 | slider(min=0.1,max=20,step=0.1,unit=×) | 1 | |
row-row-filter-mode-id | 选择数据规则 | select(condition) | — | |
data-key | 测点键 | select(editable) | — | |
anim-rules | 动画切换规则 | string(textarea,rows=3) | — |
JSON 片段
{
"uid": "sa_pulse",
"type": "scene3d-spriteanim",
"options": {
"sheet-url": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1152'%20height%3D'96'%3E%3Ccircle%20cx%3D'48'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'48'%20cy%3D'48'%20r%3D'8.0'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'1.00'%2F%3E%3Ccircle%20cx%3D'144'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'144'%20cy%3D'48'%20r%3D'11.2'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.92'%2F%3E%3Ccircle%20cx%3D'240'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'240'%20cy%3D'48'%20r%3D'14.4'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.83'%2F%3E%3Ccircle%20cx%3D'336'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'336'%20cy%3D'48'%20r%3D'17.6'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.75'%2F%3E%3Ccircle%20cx%3D'432'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'432'%20cy%3D'48'%20r%3D'20.8'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.67'%2F%3E%3Ccircle%20cx%3D'528'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'528'%20cy%3D'48'%20r%3D'24.0'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.58'%2F%3E%3Ccircle%20cx%3D'624'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'624'%20cy%3D'48'%20r%3D'27.2'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.50'%2F%3E%3Ccircle%20cx%3D'720'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'720'%20cy%3D'48'%20r%3D'30.4'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.42'%2F%3E%3Ccircle%20cx%3D'816'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'816'%20cy%3D'48'%20r%3D'33.6'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.33'%2F%3E%3Ccircle%20cx%3D'912'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'912'%20cy%3D'48'%20r%3D'36.8'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.25'%2F%3E%3Ccircle%20cx%3D'1008'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'1008'%20cy%3D'48'%20r%3D'40.0'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.17'%2F%3E%3Ccircle%20cx%3D'1104'%20cy%3D'48'%20r%3D'10'%20fill%3D'%2300e5ff'%2F%3E%3Ccircle%20cx%3D'1104'%20cy%3D'48'%20r%3D'43.2'%20fill%3D'none'%20stroke%3D'%2300e5ff'%20stroke-width%3D'5'%20opacity%3D'0.08'%2F%3E%3C%2Fsvg%3E",
"frames": 12,
"fps": 12,
"autoplay": true,
"loop": true,
"as-sprite": true,
"position": [
-8,
2.6,
0
],
"sprite-scale": 3,
"glow": true
}
}Lottie 动画 scene3d-lottie
Lottie 动画：AE 导出的矢量动画自更新纹理贴到三维平面（真三维面，可遮挡、能进截图）。做动态 logo、图标动效、引导动画。
预览即
data/三维/元素/39-lottie-Lottie动画.vpproj.json的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。
本预览依赖外部资源
Lottie 动画 JSON 取自 vjmap 官方演示资源；扩展 loader 还需从引擎插件服务按需下载。
属性
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
lottie-url | Lottie JSON 地址 | string | — | |
quality | 渲染质量 | slider(min=1,max=4,step=1) | 2 | |
speed | 播放速度 | slider(min=0.1,max=4,step=0.1,unit=×) | 1 | |
loop | 循环播放 | boolean | true | |
panel-width | 面板宽 | number(min=0.2,step=0.5) | 4 | |
panel-height | 面板高 | number(min=0.2,step=0.5) | 4 | |
billboard | 公告牌（面向相机） | boolean | true | |
glow | 辉光 | boolean | false | |
position | 位置 | vector<X,Y,Z> | [0,2,0] | |
rotation | 旋转 | vector<X,Y,Z>(unit=°) | [0,0,0] | |
row-row-filter-mode-id | 选择数据规则 | select(condition) | — |
JSON 片段
{
"uid": "lt_board",
"type": "scene3d-lottie",
"options": {
"lottie-url": "https://vjmap.com/map3d/resources/json/24017-lottie-logo-animation.json",
"quality": 2,
"speed": 1,
"loop": true,
"panel-width": 5,
"panel-height": 5,
"position": [
-4,
3.2,
0
],
"billboard": true,
"glow": true
}
}