デモの使い方

スプライン曲線で生成したワイヤーフレームのトンネルをカメラが自動で進み、マウスで視点をずらせる3Dデモです。

Three.js トンネル ワイヤーフレーム

操作手順

  1. 「マウスを左右に動かして視点変更」の通り、マウスを動かす
  2. シアン色のワイヤーフレームトンネルが色相を変えながら続くのを確認
  3. マウス位置に応じてカメラの視点がずれ、トンネルの見え方が変わるのを観察

活用シーン

  • CatmullRomCurve3とTubeGeometryによるトンネル生成の学習
  • 曲線上を移動するカメラ制御の実装例
  • 没入感のある背景演出の参考実装

Infinite Tunnel

マウスを左右に動かして視点変更