[ReactVR] Start a Virtual Reality Project Using the React VR CLI
We will learn how to set up a React VR project, run the development mode with hot reloading, and take a small dive into the generated code and make a small change.
Install:
npm -g i react-vr-cli
Create app:
react-vr init app
Enable hotreload:
localhost:/vr/?hotreload
import React from 'react';
import {
AppRegistry,
asset,
Pano,
Text,
View,
} from 'react-vr'; export default class app extends React.Component {
render() {
return (
<View>
<Pano
style={{
transform: [{rotateY: "10deg"}]
}}
onLoad={() => {console.log('Image is loaded successfully')}}
onLoadEnd={() => {console.log('Load end')}}
source={asset('mittel.jpg')}
/>
<Text
style={{
backgroundColor: '#777879',
fontSize: 0.8,
fontWeight: '400',
layoutOrigin: [0.5, 0.5],
paddingLeft: 0.2,
paddingRight: 0.2,
textAlign: 'center',
textAlignVertical: 'center',
transform: [{translate: [0, 0, -3]}],
}}>
hello world
</Text>
</View>
);
}
}; AppRegistry.registerComponent('app', () => app);
'source' can also take array of assets:
<Pano
source={[asset('right.png'), asset('left.png'), asset('up.png'), asset('down.png'), asset('back.png'), asset('front.png')]}
/>
[ReactVR] Start a Virtual Reality Project Using the React VR CLI的更多相关文章
- VR ( Virtual Reality )、AR(Augmented Reality)、MR(Mix Reality)和CR(Cinematic Reality)是什么鬼?
整个社会对虚拟现实的研究和开发源于上个世纪六十年代,计算机图形学.人机接口技术.图像处理与模式识别.多传感技术.语音处理与音响技术.高性能计算机系统.人工智能等领域在之后半个世纪取得了长足的发展为虚拟 ...
- TED_Topic5:How virtual reality can create the ultimate empathy machine
By Chris Milk # Background about our speaker Working at the frontiers of interactive technology, Chr ...
- Virtual Reality: Immersive Yourself In Your 3D Mockup
ESI's Virtual Reality software solution IC.IDO is an exceedingly powerful immersive engineering solu ...
- Tomcat中加载不到项目 项目构建Deployment Assembly报错:The given project is not a virtual component project
转: The given project is not a virtual component project The given project is not a virtual compone ...
- Virtual Reality In Action
Virtual Reality In Action VR WebXR immersive 沉浸式 https://github.com/immersive-web/webxr https://imme ...
- [ReactVR] Render Custom 3D Objects Using the Model Component in React VR
React VR isn't limited to simple 3D primitives. By using the <Model/> Component we can place a ...
- [ReactVR] Add Shapes Using 3D Primitives in React VR
React VR ships with a handful of 3D primitives. We'll importprimitives like <Sphere/>, <Box ...
- Android 虚拟现实(virtual reality)入门指南
入门指南 本文档介绍怎样使用实验性的 Cardboard SDK for Android 创建您自己的虚拟实境 (VR) 体验. Android 演示版应用:Treasure Hunt 本教程中的代码 ...
- UE4 Virtual Reality Input输入配置表导入
[/Script/Engine.InputSettings] AxisConfig=(AxisKeyName="OculusTouch_Right_FaceButton2",Axi ...
随机推荐
- 【java项目实战】dom4j解析xml文件,连接Oracle数据库
简单介绍 dom4j是由dom4j.org出品的一个开源XML解析包.这句话太官方.我们还是看一下官方给出的解释.例如以下图: dom4j是一个易于使用的.开源的,用于解析XML,XPath和XSLT ...
- 2015.04.29,外语,读书笔记-《Word Power Made Easy》 14 “如何谈论日常现象” SESSION 39
HOW TO TALK ABOUT COMMON PHENOMENA AND OCCURRENCES TEASER PREVIEW dire(['daiә(r)] adj. 可怕的,悲惨的,灾难警告的 ...
- python matplot 绘图
import numpy as np import matplotlib.pyplot as plt plt.figure(1) # 创建图表1 plt.figure(2) # 创建图表2 ax1 = ...
- 循环神经网络(RNN, Recurrent Neural Networks)介绍
原文地址: http://blog.csdn.net/heyongluoyao8/article/details/48636251# 循环神经网络(RNN, Recurrent Neural Netw ...
- 杂项-DB:数据挖掘
ylbtech-杂项-DB:数据挖掘 数据挖掘(Data mining)又译为资料探勘.数据采矿.它是数据库知识发现(英语:Knowledge-Discovery in Databases,简称:KD ...
- 完整注册+JQuery验证+selert后台校验
Java代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...
- TCP和UDP的具体区别
TCP和UDP的最完整的区别 TCP UDP TCP与UDP基本区别: 1.基于连接与无连接 2.TCP要求系统资源较多,UDP较少: 3.UDP程序结构较简单 4.流模式(TCP)与数据报模式(UD ...
- ML学习笔记- 神经网络
神经网络 有的模型可以有多种算法.而有的算法可能可用于多种模型.在神经网络中,对外部环境提供的模式样本进行学习训练,并能存储这种模式,则称为感知器;对外部环境有适应能力,能自动提取外部环境变化特征,则 ...
- Spark RDD概念学习系列之RDD的本质特征
不多说,直接上干货!
- javaweb 之 文件上传与下载
1.文件上传的原理分析 1.1文件上传的必要前提: a.提供form表单,method必须是post b.form表单的enctype必须是multipart/form-data c.提供input ...