Three.js Interactive 3D Galaxy Generator
Prompt
Create an interactive 3D galaxy generator with Three.js where users can control particle count, size, and rotation speed to generate unique galaxy formations in real-time.
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このインタラクティブな3D銀河ジェネレーターは、Three.jsを使用してユーザーが美しい渦巻銀河をリアルタイムで作成・操作できるようにします。ジェネレーターは数千の粒子を渦巻腕状に配置し、中心核を持つ遠方の銀河の外観をシミュレートします。
ユーザーは4つの主要パラメータを制御できます：粒子数（1,000から20,000個の星）、粒子サイズ、回転速度、銀河の広がり（腕がどの程度伸びるか）。色のグラデーションは、中心部の冷たい青から外腕部の暖かい黄色や白へ自動的に調整され、実際の銀河の色分布を模倣しています。
インターフェースには視覚的フィードバック付きのリアルタイムコントロール、マウスベースのカメラ回転、ズームコントロールが含まれています。FPSカウンターは、ユーザーが粒子数を調整する際のパフォーマンスを監視するのに役立ちます。各パラメータの変更は即座に銀河の形状を再生成し、さまざまな銀河形成の無限の探索を可能にします。
このプロジェクトは、効率的な粒子システムのためのBufferGeometry、頂点カラーリング、カメラ制御、リアルタイムパラメータ更新など、Three.jsのコアコンセプトを実演しています。レスポンシブデザインにより、デスクトップとモバイルデバイスの両方で適切に動作します。
Prompt Overview
This interactive 3D galaxy generator allows users to create and manipulate beautiful spiral galaxies in real-time using Three.js. The generator creates thousands of particles arranged in spiral arms with a central core, simulating the appearance of distant galaxies.
Users can control four key parameters: particle count (from 1,000 to 20,000 stars), particle size, rotation speed, and galaxy spread (how far the arms extend). The color gradient automatically adjusts from cooler blues in the center to warmer yellows and whites in the outer arms, mimicking real galaxy color distributions.
The interface includes real-time controls with visual feedback, mouse-based camera rotation, and zoom controls. The FPS counter helps users monitor performance as they adjust particle counts. Each parameter change immediately regenerates the galaxy geometry, allowing for endless exploration of different galactic formations.
This project demonstrates core Three.js concepts including BufferGeometry for efficient particle systems, vertex coloring, camera controls, and real-time parameter updates. The responsive design ensures the generator works well on both desktop and mobile devices.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選