Three.js Interactive 3D Geometric Wave
Prompt
Create an interactive 3D geometric wave animation using Three.js where users can control wave parameters in real-time. The scene should feature a grid of 3D shapes that form a flowing wave pattern, with interactive controls to adjust wave frequency, amplitude, and speed. Include a clean UI with sliders and real-time visual feedback.
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このインタラクティブな3Dジオメトリックウェーブビジュアライゼーションは、Three.jsを使用して三次元空間での波動力学をデモンストレーションします。シーンは数学的な正弦関数に基づいて流れるような波のパターンを作り出すために動的に変形する立方体のグリッドを特徴としています。
ユーザーは複数の方法でビジュアライゼーションとインタラクションできます：異なる視点を得るためにカメラを回転させるドラッグ操作、ズームイン/アウトするスクロール操作、波のパラメータを変更するリアルタイムコントロールの調整などです。インターフェースは周波数（波の密度）、振幅（波の高さ）、速度（アニメーション速度）、色相に対して直感的なスライダーを提供します。
この実装は、3Dジオメトリ作成、マテリアルプロパティ、ライティング設定、カメラ制御、リアルタイムアニメーションループを含むThree.jsのコアコンセプトを展示しています。グリッド内の各立方体は波動関数に個別に反応し、インタラクティブなパフォーマンスを維持しながらまとまりのある視覚効果を作り出します。
Prompt Overview
This interactive 3D geometric wave visualization demonstrates wave mechanics in a three-dimensional space using Three.js. The scene features a grid of cubes that dynamically transform to create flowing wave patterns based on mathematical sine functions.
Users can interact with the visualization in multiple ways: dragging to rotate the camera for different perspectives, scrolling to zoom in/out, and adjusting real-time controls to modify wave parameters. The interface provides intuitive sliders for frequency (wave density), amplitude (wave height), speed (animation rate), and color hue.
The implementation showcases core Three.js concepts including 3D geometry creation, material properties, lighting setup, camera controls, and real-time animation loops. Each cube in the grid responds individually to the wave function, creating a cohesive visual effect while maintaining interactive performance.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選