Three.js インタラクティブ3D幾何学万華鏡
P
プロンプト
Three.jsを使用して、リアルタイムで対称的な幾何学模様を生成するインタラクティブな3D万華鏡を作成します。ユーザーは直感的なUIコントロールで回転速度、パターンの複雑さ、カラースキームを制御できます。
CODE PREVIEW
AIでコードをカスタマイズ
このコードをAIが指示通りに書き換えます。プレビューは無料、コードのコピー・ダウンロードは¥100で解放されます。
オリジナル
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このインタラクティブな3D万華鏡は、Three.jsを使用した対称的なパターン生成を実演します。アプリケーションは3D空間で回転する魅惑的な幾何学模様を作成し、カスタマイズのためのリアルタイムコントロールを備えています。
主な機能:
- 調整可能な複雑さ（3-12セグメント）でのリアルタイム対称パターン生成
- 複数のカラースキーム：レインボー、モノクローム、パステル、ネオン
- 回転速度とパターン複雑さのインタラクティブコントロール
- 即座にバリエーションを作成するランダムパターンジェネレーター
- 詳細な観察のための一時停止/再開機能
- ウィンドウサイズ変更に適応するレスポンシブデザイン
技術的実装:
- パターン要素にThree.jsのトーラスと球体ジオメトリを使用
- 視覚的な深みのための透明度付きPhongマテリアルを実装
- 数学的な回転と配置による対称パターンの作成
- 強化された3D外観のための環境光と指向性ライティングを含む
- 視覚的な興味を引くための中心部にワイヤーフレーム二十面体を配置
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選