React と Threejs を使用して VR パノラマ プロジェクトを作成する詳細なプロセス

npx create-react-app parano // React プロジェクトを作成する npm install -S typescript // typescript をインストールします。これは入力支援プラグインであり、Panorama プロジェクトとはほとんど関係ありません npm install -S @types/three // typescript でサポートされている three.js プラグインをインストールします

'react' から React をインポートします
import * as THREE from 'three' // Three.jsプラグインをインポート import Banner from './img/playground.jpg' // パノラマ画像をインポート // props型宣言 interface interface MyProps {
}
//状態型宣言インターフェースインターフェースMyState {
}
クラスPanoはReact.Component<MyProps, MyState>を拡張します。
  renderer: any = new THREE.WebGLRenderer() // レンダラーを作成 scene: any = new THREE.Scene() // シーンを作成 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) // カメラを作成 geometry = new THREE.SphereBufferGeometry(100, 60, 40) // パノラマを貼り付けるための球形コンテナを作成 material: any // テクスチャ マテリアル mesh: any
  コンストラクタ(props: any) {
    スーパー（小道具）
    this.state = {}
  }
  コンポーネントマウント() {
    this.geometry.scale(-1, 1, 1)
    テクスチャを新しいTHREE.TextureLoader().load(バナー)とします。
    this.material = 新しい THREE.MeshBasicMaterial({map: テクスチャ})
    this.mesh = 新しい THREE.Mesh(this.geometry, this.material)
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(this.renderer.domElement)
    this.scene.add(this.mesh)
    カメラの位置z = 0
    window.addEventListener('resize', this.onWindowResize, false)
    this.animate()
  }
	// ウィンドウサイズが変更されたときにパノラマの表示サイズを変更します onWindowResize = () => {
    this.camera.aspect = window.innerWidth / window.innerHeight
    this.camera.updateProjectionMatrix()
    this.renderer.setSize(window.innerWidth, window.innerHeight)
  }
	// フレームごとにレンダリング animate = () => {
    アニメーションフレームをリクエストします(this.animate)
    メッシュの回転y += 0.001
    this.renderer.render(this.scene、this.camera) をレンダリングします。
  }
  与える （） {
    戻る （
      <div></div>
    ）
  }
}
デフォルトのパノラマをエクスポート

'react' から React をインポートします。
'./App.css' をインポートします。
'./pano' から Pano をインポートします。

関数App() {
 戻る （
  <div className="アプリ">
   <パノ />
  </div>
 );
}

デフォルトのアプリをエクスポートします。