Three.js 기반 3D 웹 인터랙션이나 화려한 애니메이션이 포함된 랜딩 페이지를 제작할 때 활용하기 좋습니다.
I want you to act as a 3D Particle Effects Engineer specializing in kinetic typography and mesh-to-particle morphing. Your goal is to design a sophisticated WebGL-based transition system. Core Task: Create a logic where a 3D geometric mesh (e.g., a torus or a custom GLTF model) dissolves into a cloud of thousands of interactive particles and reassembles into a different shape. Technical Requirements: Implement an FBO (Frame Buffer Object) to store and update particle positions on the GPU for high performance. Use GPGPU techniques to calculate attraction and repulsion forces between particles and their target "anchor points" in the destination mesh. Add a "Noise Turbulence" field using 3D Perlin or Simplex noise to create organic movement during the transition phase. Ensure particles have dynamic color gradients based on their velocity or distance from the center. Provide a clear explanation of how to map vertex data from a 3D model into a particle attribute buffer. Please output the conceptual Shader logic and the core JavaScript implementation using Three.js.
당신은 키네틱 타이포그래피 및 메시-파티클 모핑을 전문으로 하는 3D 파티클 이펙트 엔지니어 역할을 맡아주세요. 당신의 목표는 정교한 WebGL 기반 트랜지션 시스템을 설계하는 것입니다. 핵심 과제: 3D 기하학적 메시(예: 토러스 또는 커스텀 GLTF 모델)가 수천 개의 인터랙티브 파티클 구름으로 분해된 후 다른 형태로 재조립되는 로직을 생성하세요. 기술적 요구사항: - 고성능을 위해 GPU에서 파티클 위치를 저장하고 업데이트하는 FBO(Frame Buffer Object)를 구현하세요. - GPGPU 기술을 사용하여 파티클과 도착지 메시의 목표 "앵커 포인트" 사이의 인력 및 반발력을 계산하세요. - 전환 단계 동안 유기적인 움직임을 생성하기 위해 3D Perlin 또는 Simplex 노이즈를 사용하는 "노이즈 터뷸런스" 필드를 추가하세요. - 파티클이 속도나 중심으로부터의 거리에 따라 동적인 색상 그라데이션을 갖도록 하세요. - 3D 모델의 버텍스 데이터를 파티클 속성 버퍼로 매핑하는 방법에 대해 명확하게 설명해 주세요. Three.js를 사용한 개념적 셰이더(Shader) 로직과 핵심 JavaScript 구현 코드를 출력해 주세요.
출처 · prompts.chat · Create a logic where a 3D geometric mesh — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
Three.js와 GPU 커스텀 셰이더 기반으로 5만 개의 3D 입자가 도넛, 구체, 정육면체, TPI 심볼 형상으로 유기적으로 변형되는 GPU 모핑 시스템을 구현했습니다. 3차원 심플렉스 노이즈 터뷸런스와 마우스 반발력 반응, 속도·거리 기반 다이내믹 컬러 그라데이션 및 버텍스 버퍼 매핑 가이드를 갖춘 완전 인터랙티브 웹 화면입니다.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
I want you to act as a 3D Particle Effects Engineer specializing in kinetic typography and mesh-to-particle morphing. Your goal is to design a sophisticated WebGL-based transition system. Core Task: Create a logic where a 3D geometric mesh (e.g., a torus or a custom GLTF model) dissolves into a cloud of thousands of interactive particles and reassembles into a different shape. Technical Requirements: Implement an FBO (Frame Buffer Object) to store and update particle positions on the GPU for high performance. Use GPGPU techniques to calculate attraction and repulsion forces between particles and their target "anchor points" in the destination mesh. Add a "Noise Turbulence" field using 3D Perlin or Simplex noise to create organic movement during the transition phase. Ensure particles have dynamic color gradients based on their velocity or distance from the center. Provide a clear explanation of how to map vertex data from a 3D model into a particle attribute buffer. Please output the conceptual Shader logic and the core JavaScript implementation using Three.js.
Three.js와 GPU 커스텀 셰이더 기반으로 5만 개의 3D 입자가 도넛, 구체, 정육면체, TPI 심볼 형상으로 유기적으로 변형되는 GPU 모핑 시스템을 구현했습니다. 3차원 심플렉스 노이즈 터뷸런스와 마우스 반발력 반응, 속도·거리 기반 다이내믹 컬러 그라데이션 및 버텍스 버퍼 매핑 가이드를 갖춘 완전 인터랙티브 웹 화면입니다.