Detaillierter Prozess zur Erstellung eines VR-Panoramaprojekts mit React und Threejs

npx create-react-app parano // Erstelle ein React-Projekt npm install -S typescript // Installiere Typescript, dies ist ein typunterstütztes Plugin und hat wenig mit dem Panorama-Projekt zu tun npm install -S @types/three // Installiere das von Typescript unterstützte Three.js-Plugin

React von „react“ importieren
import * as THREE from 'three' // Importiere das Three.js-Plugin importiere Banner from './img/playground.jpg' // Importiere das Panoramabild // Deklaration des Requisitentyps Schnittstelle Schnittstelle MyProps {
}
//Statustypdeklaration Schnittstelle Schnittstelle MyState {
}
Klasse Pano erweitert React.Component<MyProps, MyState> {
  Renderer: beliebig = new THREE.WebGLRenderer() // Einen Renderer erstellen Szene: beliebig = new THREE.Scene() // Eine Szene erstellen Kamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) // Eine Kamera erstellen Geometrie = new THREE.SphereBufferGeometry(100, 60, 40) // Einen sphärischen Container zum Einfügen von Panoramen erstellen Material: beliebig // Texturmaterial Netz: beliebig
  Konstruktor(Requisiten: beliebig) {
    super (Requisiten)
    dieser.Zustand = {}
  }
  componentDidMount() {
    diese.geometrie.skala(-1, 1, 1)
    let texture = neues THREE.TextureLoader().load(banner)
    dieses.material = neues THREE.MeshBasicMaterial({map: texture})
    dieses.Netz = neues DREI.Netz(diese.Geometrie, dieses.Material)
    this.renderer.setSize(Fenster.innereBreite, Fenster.innereHöhe)
    Dokument.Body.AnhängenUntergeordnetesElement(dieses.Renderer.DomElement)
    diese.Szene.hinzufügen(dieses.Netz)
    diese.Kamera.position.z = 0
    window.addEventListener('Größe ändern', this.onWindowResize, false)
    dies.animieren()
  }
	//Ändere die Anzeigegröße des Panoramas, wenn sich die Fenstergröße ändert onWindowResize = () => {
    this.camera.aspect = Fenster.innereBreite / Fenster.innereHöhe
    diese.Kamera.updateProjectionMatrix()
    this.renderer.setSize(Fenster.innereBreite, Fenster.innereHöhe)
  }
	// Bild für Bild rendern animate = () => {
    AnfrageAnimationFrame(diese.animate)
    diese.Netzrotation.y += 0,001
    dieser.Renderer.render(diese.Szene, diese.Kamera)
  }
  rendern () {
    zurückkehren (
      <div></div>
    )
  }
}
Standard-Panorama exportieren

importiere React von „react“;
importiere './App.css';
importiere Pano aus „./pano“;

Funktion App() {
 zurückkehren (
  <div Klassenname="App">
   <Pano />
  </div>
 );
}

Standard-App exportieren;