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 rewrites this code based on your instructions. Preview is free; copy & download unlocked for ¥100.
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
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 / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選