Results for “three.js”

Add controllable rain, storms, and snow to Three.js scenes. Coordinate visible precipitation, lightning with delayed thunder, accumulating snow, wet ground, puddles, and seamless ambient audio while sharing particle resources across changing weather states.

• Add clear, rain, storm, and snow controls to a scene
• Create lightning with distance-based thunder delays
• Show accumulating snow and recurring blizzards

Generate towers, castles, pagodas, and domes in Three.js from adjustable parameters. Create construction animations with a rising reveal, matching solid sections, scaffolding, and stage captions, using reusable geometry instead of imported mesh files.

• Animate the construction of a castle or pagoda
• Create an architectural title sequence
• Generate landmarks from adjustable parameters

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 线上展览」「云展厅」「数字展馆」

The English summary is being prepared. Showing the original description.

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

Build and review HyperFrames animations using motion recipes, scene templates, and transitions. Find guidance for seven animation runtimes, including GSAP and Three.js, and inspect existing scenes for timing gaps and inconsistent motion.

• Combine motion recipes for text and shapes
• Build scenes with several animation phases
• Choose an animation runtime