最近我在学习使用 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全景内容请搜索程序员的世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员的世界!

使用 React 和 Threejs 创建一个VR全景项目的更多相关文章

  1. 使用 React 和 Threejs 创建一个VR全景项目

    最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目实现的是加载一张 2:1 的720全景分享一下我的创建过程一、搭建框架并安装需要的插件npx create-react-app parano // 创建一个 React 项目npm install -S ty......

  2. html5以及jQuery实现本地图片上传前的预览代码实例讲解

    html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥)<!DOCTYPE html> <html> <head> <title......

  3. HTML5中的Web Notification桌面通知

    一、传统的通知实现通知可以说是web中比较常见且重要的功能,私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈,这个时候,就需要页面给予即使的通知。在以前,我们的通知实现主要是通过闪烁页面的标题内容来实现,实现原理其实很简单,就是定时器不断修改document.titl......

  4. HTML5与CSS3知识点总结

    HTML常用标签总结 手摸手带你学CSS 好好学习,天天向上本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star?????????? 原文链接:https://blog.csdn.net/weixin_43461520/articl......

  5. 网页小实验——用canvas生成精灵动画图片

    实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现。初始图片如下:一、图片分割将初始图片分割为六张大小相同的棋子图片1、html舞台:1 DOCTYPE html> 2 <html lan......

  6. React html中使用react的两种方式

    基本使用<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content=......

  7. html实现随机点名器的示例代码

    此点名器开始点名后需点击停止按钮完成点名,因为是精简版没有考虑自动停止需求。姓名数据以字符串形式储存,适合小范围点名使用,有大量需求可自己适当改进。<head><meta charset="UTF-8"><meta name="viewpo......

  8. select下拉框option的样式修改

    select原样式:进行样式修改后的样式: 附上修改代码://select外面必须包裹一个div,用来覆盖select原有的样式 <div class="option"><select name=""><option valu......

  9. input标签checkbox选中触发事件的方法

    1.方法一function checkboxOnclick(checkbox){ if ( checkbox.checked == true){ //Action for checked }else{ //Action for not checked }} 2.方法二$('#allSelect'......

  10. 如何在vue中使用HTML 5 拖放API

    拖放 API 将可拖动元素添加到 HTML,使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具,使用户可以从头到尾直观地管理项目。 Trello、Pivotal Tracker 和 Jira 等工具都属于看......

随机推荐

  1. docker中实现安装php拓展步骤讲解

    一:php核心拓展包安装在docker中安装的php有一些核心的拓展包,他们一般放置在/usr/src/php/ext/目录下如下:docker exec -it php /bin/bash #进入php容器cd /usr/src/php/ext/dir如下展示的就是php的核心拓展包安装方式:#相......

  2. 剪枝决策树原理与Python实现

    机器学习经典模型决策树的实现原理,以及Python实现目录一、决策树模型 二、选择划分 2.1 信息熵和信息增益 2.2 增益率 2.3 基尼指数 三、剪枝 3.1 预剪枝 3.2 后剪枝 3.3 剪枝示例 3.4 预剪枝和后剪枝对比 四、Python实现 4.1 基尼值和基尼指数 4.2 选择划分......

  3. linux显示行数命令

    linux 如何显示一个文件的某几行(中间几行)【一】从第3000行开始,显示1000行。即显示3000~3999行cat filename | tail -n +3000 | head -n 1000【二】显示1000行到3000行cat filename| head -n 3000 | tail......

  4. Linux—用户新建目录和文件的默认权限设置:umask详解

    引言我们有没有思考过一个问题,在登录Linux系统后,我们创建的目录或者文件的权限,为什么每次创建都是统一的?我们做以下实验:新建一个用户userA,然后分别创建目录dir01和dir02,文件t1.txt和t2.txt。[root@linux01 ~]# useradd userA[root@li......

  5. python中yield的用法详解

    首先我要吐槽一下,看程序的过程中遇见了yield这个关键字,然后百度的时候,发现没有一个能简单的让我懂的,讲起来真TM的都是头头是道,什么参数,什么传递的,还口口声声说自己的教程是最简单的,最浅显易懂的,我就想问没有有考虑过读者的感受。接下来是正题:首先,如果你还没有对yield有个初步分认识,那么......

  6. Python 实现自动化Excel报表

    好几个月没有写笔记了, 并非没有积累, 而是有点懒了. 想想还是要续上, 作为工作成长的一部分哦.最近有做一些报表, 但一直找不到一个合适的报表工具, 又实在不想写前端, 后端... 思来想去, 感觉 Excel 就一定程度上能做可视化的, 除了不能动态交互外, 其他都挺好. 今天分享的就是一个关于......

  7. js获取IP地址的4种方法

    1,js取得IP地址的方法一< src="http://pv.sohu.com/cityjson?ie=utf-8"></> < type="text/java"> document.write(returnCi......

  8. Java压缩集合的三种方法

    前言这个问题算是开发当中偶尔会遇到的一个小问题,比如如何将两个集合压缩成为一个逻辑集合。如果你不理解,我们可以看一个简单的例子,去说明什么是压缩集合。本文文章不长,但是还算是比较实用的小技巧。主要内容来源于国外小哥Baeldung的博客:下面给出个地址https://www.baeldung.com......

  9. Java判断Bigdecimal类型是否等于0的方法

    1.我之前用来判断Bigdecimal类型是否等于0的方法b.equals(BigDecimal.ZERO);用equals方法和BigDecimal.ZERO进行比较。2.上面方法存在的问题有一天,调用这个这句代码的时候,传入的确实是0,但却返回false查看源代码发现:Bigdecimal的eq......

  10. Perl字符串处理函数大全

    下面请看本文详细介绍.Perl字符串处理函数1. index语法:position=index(string,substring,position);语义:返回子串substring在字符串string中的位置,如果不存在则返回-1。参数position是可选项,表示匹配之前跳过的字符数,或者说从该......