Detailed process of creating a VR panoramic project using React and Threejs

npx create-react-app parano // Create a React project npm install -S typescript // Install typescript, this is a type-assisted plugin and has little to do with the Panorama project npm install -S @types/three // Install the three.js plugin supported by typescript

import React from 'react'
import * as THREE from 'three' // Import the Three.js plugin import banner from './img/playground.jpg' // Import the panoramic image // props type declaration interface interface MyProps {
}
//state type declaration interface interface MyState {
}
class Pano extends React.Component<MyProps, MyState> {
  renderer: any = new THREE.WebGLRenderer() // Create a renderer scene: any = new THREE.Scene() // Create a scene camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) // Create a camera geometry = new THREE.SphereBufferGeometry(100, 60, 40) // Create a spherical container for pasting panoramas material: any // Texture material mesh: any
  constructor(props: any) {
    super (props)
    this.state = {}
  }
  componentDidMount() {
    this.geometry.scale(-1, 1, 1)
    let texture = new THREE.TextureLoader().load(banner)
    this.material = new THREE.MeshBasicMaterial({map: texture})
    this.mesh = new THREE.Mesh(this.geometry, this.material)
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(this.renderer.domElement)
    this.scene.add(this.mesh)
    this.camera.position.z = 0
    window.addEventListener('resize', this.onWindowResize, false)
    this.animate()
  }
	// Change the display size of the panorama when the window size changes onWindowResize = () => {
    this.camera.aspect = window.innerWidth / window.innerHeight
    this.camera.updateProjectionMatrix()
    this.renderer.setSize(window.innerWidth, window.innerHeight)
  }
	// Render frame by frame animate = () => {
    requestAnimationFrame(this.animate)
    this.mesh.rotation.y += 0.001
    this.renderer.render(this.scene, this.camera)
  }
  render () {
    return (
      <div></div>
    )
  }
}
export default Pano

import React from 'react';
import './App.css';
import Pano from './pano';

function App() {
 return (
  <div className="App">
   <Pano />
  </div>
 );
}

export default App;