使用 React 和 Threejs 创建一个VR全景项目的过程详解

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

赞 (0)

相关推荐

  • 使用webpack5从0到1搭建一个react项目的实现步骤

    使用webpack5从0到1搭建一个react项目的实现步骤

    前言 在这之前,每开始一个新项目我都是使用现有的脚手架,这非常便于快速地启动一个新项目,而且通用的脚手架通常考虑地更加全面,也有利于项目的稳定开发:不过对于一个小项目,根据需求自己搭建可能会更好,一方面小项目不需要脚手架那么丰富的功能,另一方面可以提高对项目的掌控度以方便后期的扩展. 这篇文章是在实践中总结的,具有实操性,读者可跟着一步步进行搭建,中间我会穿插一些原理,当然因为笔者的能力有限,不会特别深入. 预备知识 熟悉Javascript && HTML && CSS

  • npx create-react-app xxx创建项目报错的解决办法

    手头有一台大学时代的Windows电脑,它此前没有装过create-react-app,只装了node环境.版本信息:node -> 10.16.3,npm -> 6.9.0.前几日闲的无事想给它装个React,结果失败了,报了错,所以有了下面这出. 安装过程 根据React官方文档(上图)可以发现,此时并不需要安装create-react-app工具,只要你的node >= 8.10 && npm >= 5.6,就可以直接使用npx create-react-ap

  • 基于react项目打包css引用路径错误解决方案

    没有去修改create-react-app默认的配置文件 执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在根目录访问 这样放在服务器目录就访问不到了 报错为 手动更改index.html的路径之后又报静态资源引入错误 报错 解决方案 解决: 在package.json下面增加"homepage": ".". 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • vue或react项目生产环境去掉console.log的操作

    在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了删除console的插件,在vue-cli3里面是这样用的: 首先安装terser-webpack-plugin npm install terser-webpack-plugin -D 然后在vue.config.js文件里写插件的配置: module.exports = { configureW

  • react项目如何运行在微信公众号

    说明:项目是create-react-app结合antd-mobile写的H5,在微信公众号里运行. 1.使用a标签预览或下载PDF.写法如下,手机上点击无反应,电脑上点击网页崩溃. <a href='pdf或图片路径'> PDF或图片名称 </a> 原因是浏览器监测到访问非安全访问,给拦截下来了.于是根据报错提示,新增target和rel两个属性,写法如下: <a href='pdf或图片路径' target='_blank' rel="noreferrer&qu

  • 记一次react前端项目打包优化的方法

    前文 之前一年多前接手的一个react项目,前段时间因为做业务中台项目,对公司现有的应用项目做中台化改造,这期间将项目部署到uat环境,测试期间,测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久,白屏时间超过30s,体验很差,生产不至于这么慢但也是白屏时间挺长的,所以减少白屏时间增加用户体验成为了当务之急.复制代码 分析 通过控制台判断加载资源时间还有资源大小 通过开发者工具可以看到白屏的主要原因在于bundle.js这个打包后的文件过大,达到3.6M加上uat环境带宽等问题的话,光

  • 在react项目中使用antd的form组件,动态设置input框的值

    问题: 创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了 原因: 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了. 解决办法: 不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了. if

  • 解决VSCode调试react-native android项目错误问题

    解决VSCode调试react-native android项目错误问题

    如果运行react-native android项目出现如下错误: 解决办法如下: 一.执行adb devices,判断adb有没有断, 二.如果是adb断了就使用一下步骤 adb reverse tcp:8081 tcp:8081 npm start 如果adb没断,直接 npm start 如果执行gradle ass打包命令进行打包之后,出现如下错误: 1.检查react-native项目工程目录下的index.js里面的AppRegistry.registerComponent(appN

  • react项目从新建到部署的实现示例

    开展新项目 本文主要记录最近工作一个新项目从0-1的过程,主要记录3个节点,选型.运行时.上线. 项目选型 react 脚手架初始化,社区比较火的有cra(create-react-app)和umi,从以下几点进行对比最终选择了比较贴合项目的umi. 易用性,开箱即用.umi内置了许多功能,可是也带来很多限制,譬如对项目结构的规定提供自己生态的插件需要学习成本,cra初始化简洁选取模板即可开始,不需要额外的学习成本(即使vue玩家过来也没负担). 可拓展性,修改webpack配置.cra提供ej

  • 使用 React 和 Threejs 创建一个VR全景项目的过程详解

    最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目 实现的是加载一张 2:1 的720全景 分享一下我的创建过程 一.搭建框架并安装需要的插件 npx create-react-app parano // 创建一个 React 项目 npm install -S typescript // 安装 typescript,这个是类型辅助插件,与全景项目关系不大 npm install -S @types/three // 安装 typescript 支持的

  • 在IDEA 2020.3.1中部署Tomcat并且创建第一个web项目的过程详解

    在IDEA 2020.3.1中部署Tomcat并且创建第一个web项目的过程详解

    Tomcat介绍 Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun 和其他一些公司及个人共同开发而成.由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范.因为Tomcat 技术先进.性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可,成为目前

  • python3+django2开发一个简单的人员管理系统过程详解

    python3+django2开发一个简单的人员管理系统过程详解

    一.基础环境准备 windows环境: Pycharm python3.6 Django2.0.1 Mysql5.7 安装django 在pycharm terminal 控制台执行: python3 -m pip install django #因为本地安装了python2.7 和python3.6 2个版本,所以python3.6环境变量对应python3 二.创建工程和应用 django-admin.py startproject qiakrcmdb #工程名称 cd qiakrcmdb

  • 在 Golang 中实现一个简单的Http中间件过程详解

    在 Golang 中实现一个简单的Http中间件过程详解

    本文主要针对Golang的内置库 net/http 做了简单的扩展,通过添加中间件的形式实现了管道(Pipeline)模式,这样的好处是各模块之间是低耦合的,符合单一职责原则,可以很灵活的通过中间件的形式添加一些功能到管道中,一次请求和响应在管道中的执行过程如下 首先, 我定义了三个测试的中间件 Middleware1,2,3 如下 func Middleware1(next http.Handler) http.Handler { return http.HandlerFunc(func(w

  • IDEA 创建一个Mybatis Maven项目的方法步骤(图文)

    IDEA 创建一个Mybatis Maven项目的方法步骤(图文)

    第一步:先新建一个工程 直接next就行了,不用选内容,不然他会下载骨架会卡很久 第一个箭头是项目名称,第二个箭头是项目路径,根据自己需要修改就行了.新建好的项目是这样的. 第二步:我们需要添加一个web框架支持 右键你的项目然后选择Add Framework那一项. 选中Web Application点击ok. 这样项目结构就有了,重点是啥都不用调了很方便. 第三步:去配置Tomcat 选择Tomcat Server下面的Local 这里选择你的Tomcat在哪里 按照箭头步骤来从上到下把工程

  • React实现控制减少useContext导致非必要的渲染详解

    目录 前言 1.拆分context 2.使用useMemo包裹函数 前言 在我们使用useContext来进行数据流管理时,每当context更新时,所有使用到该context的组件都会重新渲染.如果我们的context的数据是由多个部分组成的,但只有其中一两个字段会频繁更新,但其他的数据都比较稳定时,这时,即使组件值使用到了比较稳定的那部分数据,但它依然会频繁渲染,这就很容易会导致性能问题.我们一般会使用拆分context或者结合useMemo来减少组件渲染的次数: 1.拆分context 我

  • React源码分析之useCallback与useMemo及useContext详解

    目录 热身准备 初始化mount mountCallback 更新 update 使用场景 总结 热身准备 createContext Provider Consumer useContext 初始化mount&更新update 总结 热身准备 useCallback和useMemo是一样的东西,只是入参有所不同. useCallback缓存的是回调函数,如果依赖项没有更新,就会使用缓存的回调函数: useMemo缓存的是回调函数的return,如果依赖项没有更新,就会使用缓存的return:

  • python类:class创建、数据方法属性及访问控制详解

    python类:class创建、数据方法属性及访问控制详解

    在Python中,可以通过class关键字定义自己的类,然后通过自定义的类对象类创建实例对象. python中创建类 创建一个Student的类,并且实现了这个类的初始化函数"__init__": class Student(object):     count = 0     books = []     def __init__(self, name):         self.name = name 接下来就通过上面的Student类来看看Python中类的相关内容. 类构造和

  • django搭建项目配置环境和创建表过程详解

    django搭建项目配置环境和创建表过程详解

    1. 搭建项目配置环境和创建表 创建一个ttsx的项目 django-admin startproject ttsx 在ttsx下的__init__中导入mysql import pymysql pymysql.install_as_MySQLdb() 配置mysql 读写分离配置 # default:默认的配置的是主数据库 'default': { 'ENGINE': 'django.db.backends.mysql', 'HOST': 'localhost', 'PORT': 3306,

  • React全家桶环境搭建过程详解

    本文介绍了React全家桶环境搭建过程详解,分享给大家,具体如下: 环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loader 新建tsconfig.json { "compilerOptions": { "outDir"

随机推荐