最近我在进修利用 React 共同 Three.js 来搭建一个可以欣赏720全景图片的项目
实现的是加载一张 2:1 的720全景
分享一下我的建设进程
npx create-react-app parano // 建设一个 React 项目 npm install -S typescript // 安装 typescript，这个是范例帮助插件，与全景项目干系不大 npm install -S @types/three // 安装 typescript 支持的 three.js 插件
二、建设 Pano 组件Pano 组件用来加载720全景图
import React from 'react' import * as THREE from 'three' // 引入 Three.js 插件 import banner from './img/playground.jpg' // 引入全景图 // props 范例声明接口 interface MyProps { } // state 范例声明接口 interface MyState { } class Pano extends 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 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() } // 实现窗口巨细改变的时候改变全景图的显示巨细 onWindowResize = () => { this.camera.aspect = window.innerWidth / window.innerHeight this.camera.updateProjectionMatrix() this.renderer.setSize(window.innerWidth, window.innerHeight) } // 逐帧渲染 animate = () => { requestAnimationFrame(this.animate) this.mesh.rotation.y += 0.001 this.renderer.render(this.scene, this.camera) } render () { return ( <div></div> ) } } export default Pano
三、将 Pano 组件添加到 App 组件中import React from 'react'; import './App.css'; import Pano from './pano'; function App() { return ( <div className="App"> <Pano /> </div> ); } export default App;
此时在项目目次中执行 npm run start 即可看到结果
到此这篇关于利用 React 和 Threejs 建设一个VR全景项目标进程详解的文章就先容到这了,更多相关 React 和 Threejs 建设VR全景内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！
您大概感乐趣的文章: