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的更多相关文章

  1. VR ( Virtual Reality )、AR(Augmented Reality)、MR(Mix Reality)和CR(Cinematic Reality)是什么鬼?

    整个社会对虚拟现实的研究和开发源于上个世纪六十年代,计算机图形学.人机接口技术.图像处理与模式识别.多传感技术.语音处理与音响技术.高性能计算机系统.人工智能等领域在之后半个世纪取得了长足的发展为虚拟 ...

  2. 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 ...

  3. Virtual Reality: Immersive Yourself In Your 3D Mockup

    ESI's Virtual Reality software solution IC.IDO is an exceedingly powerful immersive engineering solu ...

  4. 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 ...

  5. Virtual Reality In Action

    Virtual Reality In Action VR WebXR immersive 沉浸式 https://github.com/immersive-web/webxr https://imme ...

  6. [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 ...

  7. [ReactVR] Add Shapes Using 3D Primitives in React VR

    React VR ships with a handful of 3D primitives. We'll importprimitives like <Sphere/>, <Box ...

  8. Android 虚拟现实(virtual reality)入门指南

    入门指南 本文档介绍怎样使用实验性的 Cardboard SDK for Android 创建您自己的虚拟实境 (VR) 体验. Android 演示版应用:Treasure Hunt 本教程中的代码 ...

  9. UE4 Virtual Reality Input输入配置表导入

    [/Script/Engine.InputSettings] AxisConfig=(AxisKeyName="OculusTouch_Right_FaceButton2",Axi ...

随机推荐

  1. 用户体验之如何优化你的APP

    用户体验,速度为王,来几个优化APP“速度”的建议. 1.后台执行 毋庸多言,已是通常做法. 一般在执行下载任务时让其在后台运营,让用户有精力去做别的事情. 后端加载 2.提前显示 客户端与WEB的数 ...

  2. [Node.js] Proxy Requests for Local and Remote Service Parity

    High availability apps require that no distinction be made between local and remote services. Attach ...

  3. 单词数 (STL set集合)

    单词数 Problem Description lily的好朋友xiaoou333近期非常空.他想了一件没有什么意义的事情.就是统计一篇文章里不同单词的总数.以下你的任务是帮助xiaoou333解决问 ...

  4. 不做Next,争做Nest——庆科首届智能硬件创新设计大赛产生决赛12强

      智能硬件,Wi-Fi互联,谁是下一个Nest?邀你共见证! 2014年3月到7月.由上海庆科信息技术有限公司主办的首届 MXCHIP 智能硬件创新设计大赛--"寻找下一个nest&quo ...

  5. Django学习笔记(一)——安装,创建项目,配置

    疯狂的暑假学习之 Django学习笔记(一) 教材  书<The Django Book> 视频:csvt Django视频 1.创建项目 django‐admin.py startpro ...

  6. 深刻理解Nginx之基本配置和升级(2)

    3 Nginx基本配置 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvam9obl9mX2xhdQ==/font/5a6L5L2T/fontsize/400 ...

  7. svn 服务器的搭建

     SVN服务器运行模式:模式1:svn服务器单独运行  监听: 3690端口    访问: svn://IP模式2: svn 服务器+ apache   : 80 端口  访问: http://IP  ...

  8. 原来C++之父在大摩工作呀,并且还是总经理。。

    摩根士丹利信息技术部门简历接收即将截止.请同学们抓紧投递 摩根士丹利9月.10月将在中国各大高校举办包含技术讲座.信息分享会以及校园宣讲会在 内的一系列校园活动.同学们将有机会和摩根士丹利高管以及返校 ...

  9. HDU 2054 A==B? 大数

    Problem Description Give you two numbers A and B, if A is equal to B, you should print "YES&quo ...

  10. HTTP Error 500.19

    HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed because the related ...