프롬프트 도감 › No.2332

3D 도형 입자 변신 코드

Mesh Particle Morphing

3D 도형이 수천 개의 작은 입자로 흩어졌다가 다른 모양으로 다시 모이는 웹 효과의 코드를 Three.js로 만들어 줘요. 입자가 움직이는 원리 설명도 함께 나와요.

이럴 때 웹사이트 첫 화면 효과, 포트폴리오 연출, 3D 공부

도구 ChatGPT · Claude · Gemini

프롬프트

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.

팁

• 토러스 대신 쓸 모양을 먼저 정해서 적어요
• 코드는 작은 부분부터 나눠 달라고 요청해요

출처

• loshu2000 (GitHub)
• f/prompts.chat (GitHub)

권리: CC0 (f/prompts.chat). 자유 사용. 기여자: loshu2000.