Three.js Interactive 3D Geometric Kaleidoscope
P
Prompt
Create an interactive 3D kaleidoscope using Three.js that generates symmetrical geometric patterns in real-time. Users can control rotation speed, pattern complexity, and color schemes through intuitive UI controls.
CODE PREVIEW
エディタを読み込み中…
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このインタラクティブな3D万華鏡は、Three.jsを使用した対称的なパターン生成を実演します。アプリケーションは3D空間で回転する魅惑的な幾何学模様を作成し、カスタマイズのためのリアルタイムコントロールを備えています。
主な機能:
- 調整可能な複雑さ（3-12セグメント）でのリアルタイム対称パターン生成
- 複数のカラースキーム：レインボー、モノクローム、パステル、ネオン
- 回転速度とパターン複雑さのインタラクティブコントロール
- 即座にバリエーションを作成するランダムパターンジェネレーター
- 詳細な観察のための一時停止/再開機能
- ウィンドウサイズ変更に適応するレスポンシブデザイン
技術的実装:
- パターン要素にThree.jsのトーラスと球体ジオメトリを使用
- 視覚的な深みのための透明度付きPhongマテリアルを実装
- 数学的な回転と配置による対称パターンの作成
- 強化された3D外観のための環境光と指向性ライティングを含む
- 視覚的な興味を引くための中心部にワイヤーフレーム二十面体を配置
Prompt Overview
This interactive 3D kaleidoscope demonstrates symmetrical pattern generation using Three.js. The application creates mesmerizing geometric patterns that rotate in 3D space, with real-time controls for customization.
Key Features:
- Real-time symmetrical pattern generation with adjustable complexity (3-12 segments)
- Multiple color schemes: Rainbow, Monochrome, Pastel, and Neon
- Interactive controls for rotation speed and pattern complexity
- Random pattern generator for instant variations
- Pause/resume functionality for detailed observation
- Responsive design that adapts to window resizing
Technical Implementation:
- Uses Three.js Torus and Sphere geometries for pattern elements
- Implements Phong materials with transparency for visual depth
- Creates symmetrical patterns through mathematical rotation and positioning
- Includes ambient and directional lighting for enhanced 3D appearance
- Features a wireframe icosahedron at the center for visual interest
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選