'three.js' 검색 결과

Add a real 3D object to a web page using Three.js. Combine geometric depth, materials that respond to light, perspective, and subtle rotation or floating motion for hero sections and product visuals.

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

• Adding a faceted 3D object to a hero section
• Creating metal or ceramic-looking product visuals
• Adding subtle rotation and floating motion to web layouts

Prepare and deploy Three.js or other web games from a tested commit, a specific saved code version. Check the live game's controls, assets, and display, then record release evidence and a rollback target.

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

• Releasing a tested web game
• Checking controls and assets in production
• Recording release evidence and a rollback target

Build a continuous 3D website where scrolling guides the camera, lighting, text, and interactions through planned chapters. The skill covers visual planning, responsive composition, progressive loading, accessibility, and performance checks for a live Three.js world.

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

• Create a product story set in a continuous 3D world
• Build an interactive portfolio with a scrolling camera journey
• Present an exhibition through connected spatial chapters

Build or audit browser map editors for Three.js and isometric games. Reuse production world definitions, edit placements in isolated drafts, inspect enemy behavior overlays, and validate exports before reviewed integration into the game.

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

• Build a map editor from existing game definitions
• Adjust placements with dragging, snapping, and undo
• Inspect enemy detection ranges and patrol routes

Design and implement sound feedback for Three.js or web games, from action cues to music transitions. Define which sounds take priority, respect volume controls, provide visual alternatives, and check browser behavior and audio performance.

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

• Give attacks, hits, and blocks distinct sound cues
• Keep critical sounds audible during busy combat
• Change music smoothly as game states change

Plan and integrate assets for Three.js or web games by choosing imported models, code-generated geometry, or 2D media. Define scale and collision needs, check appearance and performance in the game, and record sources and licenses.

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

• Choosing between imported models, code-generated shapes, and 2D art
• Defining asset scale, attachment points, and collision needs
• Checking asset readability and performance in the game

Build and check monsters for Three.js and web action games using shared rules for joints, attachment points, collision shapes, and combat states. Separate visual animation from damage decisions, and provide reproducible checks for attacks and detail-level changes.

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

• Standardizing joints and attachment points across monsters
• Connecting attack timing with collision and damage handling
• Reproducing combat states and attack phase boundaries

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

Create interactive views of dense datasets, spatial paths, and flows using WebGL, which uses the GPU for rendering. Choose suitable libraries and design navigation, labels, animation, and static alternatives around the analytical task.

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

• Explore spatial trajectories and point clouds
• Build dense scatterplots and network views
• Animate flows between locations or nodes

Build a Three.js object viewer with a gentle camera lean on hover and a click-to-inspect mode. Visitors can rotate and zoom the object, then return it to its original position using mouse, touch, or keyboard controls.

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

• Add interactive inspection to a 3D product showcase
• Let visitors rotate and examine joinery details
• Add touch and keyboard controls to portfolio objects

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.

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

React로 영상을 만들 때 Remotion 구현 규칙과 코드 예시를 참고합니다. 애니메이션, 음성, 자막, 차트, 3D와 장면 전환 및 소재 재생 시간을 다룹니다.

• 문자 애니메이션과 장면 전환 제작
• 영상에 음성과 자막 추가
• 영상에서 차트와 3D 표현

Build or extend an isometric action RPG, viewed from an angled overhead perspective, using web technology. Develop a playable loop covering movement, combat, rewards, progression, and saves, with staged implementation and release checks.

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

• Building a first playable action RPG loop
• Adding combat, enemies, and rewards in stages
• Organizing equipment, quests, and zone data

Design and build marketing sites, portfolios, and landing pages with original imagery, coordinated typography, and GSAP animations. The workflow also covers accessible interactions, media sourcing, performance limits, and static alternatives when motion or graphics are unavailable.

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

• Build a landing page with coordinated imagery and motion
• Create a portfolio with a distinctive visual direction
• Design accessible scroll animations

Build interactive 3D tours for buildings, museums, and showrooms. Coordinate guided camera routes, room lists, floor plans, and orbit inspection, which lets viewers rotate around a model, while managing transitions, asset loading, and accessible controls.

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

• Building architectural walkthroughs
• Adding room navigation to real estate tours
• Creating museum and showroom tours

Stand up a three.js scene: import maps and the three/addons path, the Scene/PerspectiveCamera/WebGLRenderer trio, the setAnimationLoop render loop, responsive resize, and OrbitControls. Use when starting or debugging a three.js app — when the user mentions three.js, THREE.Scene, WebGLRenderer, PerspectiveCamera, the render loop, resizing, or OrbitControls. For models use threejs-gltf-loading; for materials/lights use threejs-materials-lighting.

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

Light and shade a three.js scene: choose materials (MeshStandardMaterial PBR vs unlit MeshBasicMaterial), add ambient/hemisphere/directional/point/spot lights, turn on shadow maps, and use an environment map (IBL) for realistic reflections. Use when a three.js model looks black, flat, or wrong — when the user mentions three.js materials, MeshStandardMaterial, lights, shadows, envMap, or PBR. For renderer/loop setup use threejs-scene-setup; for loading models use threejs-gltf-loading.

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

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

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

목표 이미지와 구현한 3D 장면의 스크린샷을 비교해 구도, 조명, 질감을 단계적으로 개선합니다. 시각적 재현도를 평가하고 렌더링 속도도 확인하며 수정을 반복합니다.

• 목표 이미지와 비슷한 3D 장면 제작
• 브라우저 게임의 조명과 질감 개선
• 기존 3D 작품의 시각적 완성도 개선

Add a 3D card carousel to a HyperFrames video. Rounded cuboids enter from the right, rotate in sequence, pause on a featured card, and exit left, with 40 variables for content, geometry, lighting, and camera settings.

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

• Presenting multiple cards in a 3D carousel
• Pausing on a featured card
• Replacing card content with JSON

Build browser games and game engines with HTML5, Canvas, WebGL, and JavaScript. Starter templates and reference guides support 2D and 3D graphics, controls, collision detection, audio, multiplayer features, performance improvements, and publishing.

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

• Build a breakout, maze, or platform game
• Add movement, gravity, and collision detection
• Support touch input and game controllers