'three.js' 검색 결과

Find topic-specific API guidance and implementation patterns for Three.js projects. Ten references cover scene setup, geometry, materials, lighting, textures, animation, loading models, custom visual effects, postprocessing, and mouse or touch interaction.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Set up a 3D scene with cameras and lighting
• Check how to load GLTF models
• Implement animation and custom visual effects

Helps agents build the foundations of a Three.js scene, including cameras, rendering settings, object grouping, and movement. Code examples cover coordinate systems, resizing, animation timing, resource cleanup, and basic performance improvements for browser-based 3D projects.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Set up a browser-based 3D scene
• Choose between perspective and orthographic cameras
• Move or rotate several objects as a group

Build asset loading for Three.js scenes, including 3D models, textures, and HDR images for backgrounds and reflections. Coordinate multiple files, track loading progress, reuse cached assets, and handle failures with retries or fallback files.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Load GLTF/GLB models into a Three.js scene
• Show loading progress across multiple assets
• Use HDR images for backgrounds and reflections

Add glow, depth-based blur, color correction, and other finishing effects to Three.js scenes. Covers combining effects with EffectComposer, writing custom shaders for screen effects, handling window resizing, and adjusting rendering workload.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding glow to objects in a 3D scene
• Adjusting background blur and scene colors
• Highlighting selected objects with outlines

Build 3D elements and interactive browser experiences with Three.js. The skill covers scene setup, materials that define surface appearance, user controls, and post-processing, which adds visual effects after rendering. The full workflow requires the upstream skill bundle.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating 3D elements for the browser
• Building interactive 3D experiences
• Working on materials and user controls

Create a 3D object with three.js, inspect it from every angle in an interactive viewer, and download it as OBJ + MTL or GLB for use in other 3D applications.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a 3D object and inspect it from every angle
• Export a model for further editing in Blender
• Review an object's silhouette and materials

Style Three.js objects with realistic, cartoon, or custom materials. Choose material types, adjust textures and reflections, create glass or metal effects, and use shader code for custom appearance while considering rendering performance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Give 3D objects metal or glass surfaces
• Create cartoon-style shading
• Adjust textures and environmental reflections

Add mouse, touch, and keyboard interaction to Three.js scenes. Implement object picking, camera navigation, dragging, and transform handles, with examples for selection feedback, coordinate conversion, and limiting the cost of interaction checks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Select 3D objects with clicks or touch
• Add camera rotation and zoom controls
• Drag, rotate, and scale objects

Configure images and videos as surface textures in Three.js, and use environment images for backgrounds and reflections. Adjust placement, color settings, repetition, and filtering, then manage texture memory through compression, reuse, and disposal.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adjust image placement and tiling on 3D surfaces
• Use HDR images for backgrounds and reflections
• Apply video or Canvas content to a 3D surface

Build custom visual effects in Three.js using shaders, programs that control shape and surface appearance. Add animated waves, glowing edges, gradients, or dissolving surfaces, and extend existing materials with custom rendering behavior.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Animate a surface with wave-like deformation
• Add glowing edges or gradients
• Create a dissolving surface effect

Create Three.js shapes, custom meshes, 3D text, and point clouds. Explains vertex editing and geometry utilities, plus instancing, a technique for efficiently drawing many copies of the same shape with different positions, sizes, or colors.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating basic solids and path-based 3D shapes
• Building and modifying custom meshes
• Displaying 3D text, point clouds, and wireframes

Set up lighting and shadows in Three.js scenes. Choose light types, create outdoor or studio lighting, use environment images to illuminate materials, and tune shadow settings to balance appearance with rendering performance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create sunlight and sky lighting outdoors
• Set up studio or three-point lighting
• Use HDR images for environment lighting

Animate 3D objects in Three.js using timed keyframes, bone movement, and shape changes. Play animations stored in GLTF models, control playback speed and looping, blend actions, and create motion through code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Playing animations included in GLTF models
• Blending idle, walk, and run animations
• Animating facial expressions and bones

Create interactive 3D scenes for websites, including product views and scroll-driven animations. Covers choosing Three.js, React Three Fiber, or Spline, preparing lightweight models, showing loading progress, and adapting experiences for mobile devices.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building an interactive 3D product configurator
• Adding 3D scenes to a portfolio
• Animating models and cameras as visitors scroll

Build a Three.js 3D model from an object or character reference image using code. The workflow develops shapes and materials in stages, compares rendered views with the reference, and guides corrections through quality checks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Rebuilding a photographed object as a browser-based 3D prop
• Creating a stylized character from a reference image
• Planning model parts, materials, and animation pivots

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

Build editable Three.js worlds from text or structured briefs, with terrain, distinct regions, landmarks, vegetation, and camera paths. Review the environment from multiple viewpoints and refine selected areas while preserving the overall layout and reproducible settings.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a continuous 3D landscape from a written brief
• Plan a camera fly-through across distinct regions
• Refine one area's terrain or vegetation placement

Build and debug interactive web 3D scenes with Three.js, React Three Fiber, or Spline. Plan product configurators and portfolios, prepare models, connect scroll interactions, and review loading feedback, fallback content, accessibility, and performance on target devices.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding interactive 3D product previews and variant controls
• Creating a portfolio scene linked to scrolling
• Investigating slow loading or rendering in a 3D scene

Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多，或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词："Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于：通用 React 性能问题（用 vercel-react-best-practices）、WebGL/Three.js 入门教学、3D 美术资产的制作本身。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create videos in React with Remotion using focused implementation guidance and code examples. The skill covers animation, audio, captions, charts, 3D content, and scene transitions, along with handling media assets and timing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating animated text and scene transitions
• Adding audio and subtitles to videos
• Showing charts and 3D content in videos