Create or debug interactive web scenes with Three.js, including product viewers and animated page visuals. The skill covers cameras, lighting, model loading, controls, performance tuning, and cleanup of graphics resources when scenes close.
中文简介正在准备中。当前显示英语简介。
- Creating an interactive 3D product viewer
- Adding an interactive 3D hero scene
- Loading glTF models and setting up controls
MengTo/Skills☆ 68662026年10月18日 更新
Build a Three.js landscape backdrop for buildings, products, or figures. Combine uneven terrain, wind-blown grass, scattered stones, sky, and stars, with smooth transitions between times of day and guidance on rendering performance.
中文简介正在准备中。当前显示英语简介。
- Create a landscape backdrop for a hero section
- Place a product or building in a natural setting
- Build scenery for a scrolling world
MengTo/Skills☆ 68662026年10月18日 更新
Transform an article, case study, or brand story into a connected scrolling page. Choose scroll-controlled video, a real-time Three.js scene, or HTML with charts and typography, then organize the narrative into five to seven clear stages.
中文简介正在准备中。当前显示英语简介。
- Turn a long article into a visual scrolling journey
- Present a product story through a connected 3D scene
- Explain report findings with scrolling charts and text
MengTo/Skills☆ 68662026年10月18日 更新
Build a globe-like 3D visual in Three.js, a library for browser graphics. Combine a dense sphere of glowing particles with a thin orbital ring, then adjust color, density, tilt, and gentle motion.
中文简介正在准备中。当前显示英语简介。
- Adding a planetary particle visual to a website
- Creating a data-globe effect for an infrastructure service
- Matching orbital ring colors to a brand
MengTo/Skills☆ 68662026年10月18日 更新
Add subtle mouse-responsive depth to a Three.js hero scene. Smooth pointer movement drives small camera shifts and different object rotations, keeping the subject aligned with nearby text and cards while creating a gentle sense of perspective.
中文简介正在准备中。当前显示英语简介。
- Add subtle mouse response to a 3D hero
- Give foreground and background different movement
- Keep a moving model aligned with text and cards
MengTo/Skills☆ 68662026年10月18日 更新
Build and test Three.js games for mobile browsers, covering touch controls, screen orientation, readable game information, and device-appropriate graphics. Refine movement, actions, inventory interactions, and performance through checks of real mobile browser behavior.
中文简介正在准备中。当前显示英语简介。
- Designing touch movement and action controls
- Adapting game screens to portrait and landscape
- Tuning graphics quality for mobile devices
MengTo/Skills☆ 68662026年10月18日 更新
Measure and improve Three.js or WebGL game performance through repeatable gameplay checks. Identify CPU or GPU bottlenecks, reduce unnecessary rendering and processing, and verify that controls, collisions, visuals, and memory remain stable.
中文简介正在准备中。当前显示英语简介。
- Investigating frame-time spikes
- Reducing rendering and particle workloads
- Improving performance on mobile devices
MengTo/Skills☆ 68662026年10月18日 更新
Design and test combat encounters in Three.js action games. Plan arenas, enemy roles, spawn timing, objectives, boss phases, and rewards, then check fairness and difficulty using repeatable starting conditions on desktop and mobile.
中文简介正在准备中。当前显示英语简介。
- Planning combat arenas and enemy combinations
- Tuning enemy waves and boss phases
- Checking attack warnings and recovery opportunities
MengTo/Skills☆ 68662026年10月18日 更新
Build a scanning entrance for Three.js models, revealing their wire structure before the solid surface appears. Coordinate both layers with one expanding wave, then remove the temporary wires when the animation finishes.
中文简介正在准备中。当前显示英语简介。
- Introduce a 3D model with a radial scan
- Show a model's structure before its surface
- Create a holographic assembly effect
MengTo/Skills☆ 68662026年10月18日 更新
Build reusable enemy types and attack sets for Three.js action games. Separate enemy definitions from live state, standardize models and hit detection, and validate combat timing, placeholder assets, and desktop and mobile encounters.
中文简介正在准备中。当前显示英语简介。
- Adding enemies through reusable data definitions
- Separating enemy data from live combat state
- Standardizing models and temporary replacements
MengTo/Skills☆ 68662026年10月18日 更新
Create Three.js game effects that clearly communicate attacks, hits, damage, and status changes. Define each effect’s purpose and lifetime, limit resource use, and test overlapping effects, repeated triggers, low-quality settings, and reduced-motion alternatives.
中文简介正在准备中。当前显示英语简介。
- Distinguish attack warnings from hit effects
- Create damage and status feedback
- Limit particle counts during repeated attacks
MengTo/Skills☆ 68662026年10月18日 更新
Implement and tune Three.js game cameras so players, threats, and objectives stay readable. Covers smooth following, isometric views, zoom and orbit limits, obstruction handling, target lock-on, camera shake, touch controls, and checks for regressions.
中文简介正在准备中。当前显示英语简介。
- Tuning follow cameras and isometric framing
- Keeping players visible around walls and tall props
- Adding lock-on behavior and temporary camera shake
MengTo/Skills☆ 68662026年10月18日 更新
Add shafts of sunlight to Three.js or similar 3D scenes. Shape rays with roofs and foliage, align them with the sun, and tune rendering effects so foreground surfaces keep their contrast while processing costs remain measurable.
中文简介正在准备中。当前显示英语简介。
- Add sunbeams through a tree canopy
- Show sunlight passing through roof gaps
- Create golden-hour architectural scenes
MengTo/Skills☆ 68662026年10月18日 更新
Create coordinated combat visual effects in Three.js, combining branching lightning, a storm orb, black trails, sparks, and impact frames. A shared clock keeps charge-ups, dashes, and hits synchronized, including brief pauses that emphasize contact.
中文简介正在准备中。当前显示英语简介。
- Create a lightning fist or energy orb
- Add black trails to a dash
- Coordinate ground strikes and wet reflections
MengTo/Skills☆ 68662026年10月18日 更新
Create wood surfaces in Three.js using a single material with code-generated grain, pores, end grain, and finishes. Coordinate color, roughness, and surface relief to improve close-up detail and reduce visible repetition across boards.
中文简介正在准备中。当前显示英语简介。
- Creating wood grain for furniture, floors, and tool handles
- Adding pores and end-grain detail for close-up views
- Adjusting oil, wax, and lacquer finishes
MengTo/Skills☆ 68662026年10月18日 更新
Build ice and frost visual effects in Three.js using reusable modules. Combine branching frost growth, refractive ice spikes, cracks and settling fragments, freezing mist, and swirling snow into a coordinated sequence demonstrated on a snowy ground.
中文简介正在准备中。当前显示英语简介。
- Animate frost spreading across the ground
- Create erupting ice spikes that crack and shatter
- Combine freezing mist with a swirling blizzard
MengTo/Skills☆ 68662026年10月18日 更新
Build falling leaves in Three.js and similar 3D scenes, with visible front, edge, and back views as they tumble and drift. Coordinate wind, scene depth, camera-aware recycling, and performance checks for a convincing autumn effect.
中文简介正在准备中。当前显示英语简介。
- Adding falling autumn leaves to a 3D scene
- Coordinating leaf tumble, sideways drift, and wind
- Managing leaves around buildings and camera movement
MengTo/Skills☆ 68662026年10月18日 更新
Add underwater sunbeams to a Three.js scene, with rippling light patterns, a shimmering surface viewed from below, and matching illumination on fish. The beams shift against objects as the camera moves, giving the water depth.
中文简介正在准备中。当前显示英语简介。
- Add sunbeams to an underwater scene
- Render a rippling water surface from below
- Light swimming fish as they cross beams
MengTo/Skills☆ 68662026年10月18日 更新
Build fire effects in Three.js, including fireballs, moving flame fronts, whirls, and smouldering ground. A reusable module combines rising flames, temperature-based color, smoke, sparks, heat distortion, and shared firelight, with a five-stage demonstration.
中文简介正在准备中。当前显示英语简介。
- Creating held flames and thrown fireballs
- Building expanding walls and rings of fire
- Staging fire whirls with smoke columns
MengTo/Skills☆ 68662026年10月18日 更新
Create or revise Three.js game levels with movement kept on one flat plane. Organize routes, collision, encounters, objectives, and lighting, then verify visibility, traversal, reset behavior, and controls through desktop and mobile browser playthroughs.
中文简介正在准备中。当前显示英语简介。
- Designing flat routes and combat arenas
- Separating decoration, collision, and navigation data
- Matching local lights to visible torches or lanterns
MengTo/Skills☆ 68662026年10月18日 更新
Build water and crystal visual effects in Three.js, including clear orbs, flowing lashes, splashes, growing crystals, and falling shards. A reusable module combines light bending, reflections, ripples, and ground contact into coordinated sequences.
中文简介正在准备中。当前显示英语简介。
- Creating clear water orbs and flowing water lashes
- Animating crystal growth, resonance, and shattering
- Adding splashes, rain, and ripples to pools
MengTo/Skills☆ 68662026年10月18日 更新
Build detailed paper surfaces in Three.js for sheets, labels, cards, or shoji panels. Reproduce visible fibres, torn edges, layered thickness, curled corners, ink bleeding, aged edges, and backlit translucency, with additional detail for close-up views.
中文简介正在准备中。当前显示英语简介。
- Creating backlit washi shoji panels
- Adding torn edges and thickness to cards or labels
- Showing paper fibres in close-up views
MengTo/Skills☆ 68662026年10月18日 更新
Web 线上展览开发 (虚拟展厅) (Web 线上展览 / 虚拟展厅开发 (从业者/工程视角) — 用 web 技术开发线上展览、虚拟展厅、云展会、数字展馆,覆盖 3D 空间、全景漫游、WebXR、文博数字化、营销云展厅、3D 商品展示等形态。覆盖: (a) 技术栈 — 3D web(Three.js / React Three Fiber / Babylon.js / Google model-viewer / WebGL / WebGPU)、全景(Pannellum / Marzipano / Photo Sphere Viewer / krpano / 720云)、WebXR(WebXR Device API / A-Frame)、资产管线(glTF·GLB / Draco / Meshopt / KTX2 纹理压缩 / gltf-transform / LOD); (b) 自研 vs SaaS 平台选型(国内: 众趣 / 酷雷曼 / 比目鱼 / 会鸽 / 3DVista; 海外: Matterport / Kuula / Artsteps / Spatial); (c) 性能优化(大场景加载 / 模型轻量化 / draw call / 移动端 / 首屏 / 显存)——web 3D 第一性难题; (d) 策展与导览(动线设计 / 热点 hotspot / 语音讲解 / 交互); (e) 文博数字化(IIIF / 数字孪生 / 高清文物) 与 会展·电商商业化(营销云展厅 / 数据埋点 / 线索转化); (f) 部署(CDN / 流式加载 / 跨端兼容 / WebGL 降级)。学派分歧: 自研 Three.js vs SaaS 平台、真 3D 重场景 vs 720 全景轻量、WebGL vs WebGPU、文博考据派 vs 营销转化派、沉浸优先 vs 加载优先。不含: 线下展陈 / 展台搭建、原生 VR App(非 web)、通用 3D 游戏开发、纯 3D 建模教程。) Master OS — automated mastery of Web 线上展览 / 虚拟展厅开发 (从业者/工程视角) — 用 web 技术开发线上展览、虚拟展厅、云展会、数字展馆,覆盖 3D 空间、全景漫游、WebXR、文博数字化、营销云展厅、3D 商品展示等形态。覆盖: (a) 技术栈 — 3D web(Three.js / React Three Fiber / Babylon.js / Google model-viewer / WebGL / WebGPU)、全景(Pannellum / Marzipano / Photo Sphere Viewer / krpano / 720云)、WebXR(WebXR Device API / A-Frame)、资产管线(glTF·GLB / Draco / Meshopt / KTX2 纹理压缩 / gltf-transform / LOD); (b) 自研 vs SaaS 平台选型(国内: 众趣 / 酷雷曼 / 比目鱼 / 会鸽 / 3DVista; 海外: Matterport / Kuula / Artsteps / Spatial); (c) 性能优化(大场景加载 / 模型轻量化 / draw call / 移动端 / 首屏 / 显存)——web 3D 第一性难题; (d) 策展与导览(动线设计 / 热点 hotspot / 语音讲解 / 交互); (e) 文博数字化(IIIF / 数字孪生 / 高清文物) 与 会展·电商商业化(营销云展厅 / 数据埋点 / 线索转化); (f) 部署(CDN / 流式加载 / 跨端兼容 / WebGL 降级)。学派分歧: 自研 Three.js vs SaaS 平台、真 3D 重场景 vs 720 全景轻量、WebGL vs WebGPU、文博考据派 vs 营销转化派、沉浸优先 vs 加载优先。不含: 线下展陈 / 展台搭建、原生 VR App(非 web)、通用 3D 游戏开发、纯 3D 建模教程。: top builders' mental models, tool stack, current workflows, jargon, and where to keep up. Trigger this skill when the user works on Web 线上展览 / 虚拟展厅开发 (从业者/工程视角) — 用 web 技术开发线上展览、虚拟展厅、云展会、数字展馆,覆盖 3D 空间、全景漫游、WebXR、文博数字化、营销云展厅、3D 商品展示等形态。覆盖: (a) 技术栈 — 3D web(Three.js / React Three Fiber / Babylon.js / Google model-viewer / WebGL / WebGPU)、全景(Pannellum / Marzipano / Photo Sphere Viewer / krpano / 720云)、WebXR(WebXR Device API / A-Frame)、资产管线(glTF·GLB / Draco / Meshopt / KTX2 纹理压缩 / gltf-transform / LOD); (b) 自研 vs SaaS 平台选型(国内: 众趣 / 酷雷曼 / 比目鱼 / 会鸽 / 3DVista; 海外: Matterport / Kuula / Artsteps / Spatial); (c) 性能优化(大场景加载 / 模型轻量化 / draw call / 移动端 / 首屏 / 显存)——web 3D 第一性难题; (d) 策展与导览(动线设计 / 热点 hotspot / 语音讲解 / 交互); (e) 文博数字化(IIIF / 数字孪生 / 高清文物) 与 会展·电商商业化(营销云展厅 / 数据埋点 / 线索转化); (f) 部署(CDN / 流式加载 / 跨端兼容 / WebGL 降级)。学派分歧: 自研 Three.js vs SaaS 平台、真 3D 重场景 vs 720 全景轻量、WebGL vs WebGPU、文博考据派 vs 营销转化派、沉浸优先 vs 加载优先。不含: 线下展陈 / 展台搭建、原生 VR App(非 web)、通用 3D 游戏开发、纯 3D 建模教程。 problems and wants industry-grade thinking, tool selection, or workflow guidance. 触发词:「线上展览」「虚拟展厅」「web 线上展览」「云展厅」「数字展馆」
中文简介正在准备中。当前显示原文说明。
swaylq/master-skill☆ 1632026年9月6日 更新
Build HyperFrames animations from small motion recipes, scene templates, and transitions. The skill guides runtime selection, including GSAP, Lottie, and Three.js, and provides an audit script to examine timing and choreography while following HyperFrames requirements for reproducible rendering.
中文简介正在准备中。当前显示英语简介。
- Combine motion recipes into a scene
- Build a multi-phase brand reveal from a template
- Design transitions between scenes
calesthio/OpenMontage☆ 7万2026年10月17日 更新