Three.js 3Dグラフィックス

Three.js 3Dグラフィックス

インタラクティブ3Dシーン

機能の説明

このデモでは、Three.jsを使用して3Dシーンを作成しています。 マウスで視点を変更でき、ボタンで様々なインタラクションを楽しめます。

操作方法

  • マウスドラッグ: 視点の回転
  • マウスホイール: ズームイン/アウト
  • 回転を停止/開始: オブジェクトの自動回転制御
  • 色を変更: ランダムな色に変更
  • 立方体を追加: シーンに新しい立方体を追加

技術仕様

  • 3Dレンダリングエンジン: Three.js
  • マウスコントロール: OrbitControls
  • ライティング: DirectionalLight + AmbientLight
  • アニメーション: requestAnimationFrame