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. POJ 2191

    只会打表 #include <iostream> #include <cstdio> #include <cstdlib> #include <cstring ...

  2. [Tailwind] Apply mobile-first Responsive Classes in Tailwind

    In this lesson, we take a look at tailwind's mobile-first CSS architecture and learn how to apply st ...

  3. 引用内部函数绑定机制,R转义字符,C++引用,别名,模板元,宏,断言,C++多线程,C++智能指针

     1.引用内部函数绑定机制 #include<iostream> #include<functional> usingnamespacestd; usingnamespac ...

  4. 《C++编程思想》第四章 初始化与清除(原书代码+习题+解答)

    相关代码: 1. #include <stdio.h> class tree { int height; public: tree(int initialHeight); ~tree(); ...

  5. Unreal Engine 4 C++ 为编辑器中Actor创建自己定义图标

    有时候我们创建场景的时候,特定的Actor我们想给它一个特定的图标,便于观察.比方这样: 实现起来也非常easy.须要编写C++代码: 我们创建一个Actor,叫AMyActor.它包括一个Sprit ...

  6. unknown argument: &#39;-websockets&#39;

    找到building setting找到other link flgs里把里面'-websockets删掉

  7. 读配置文件能够保持顺序的 Java Properties 类

    序 前几天,公司项目中有一个需求是读取配置文件的.并且最好可以保证载入到内存中的顺序可以和配置文件里的顺序一致,可是.假设使用 jdk 中提供的 Properties 类的话,读取配置文件后.载入到内 ...

  8. angularjs1-过滤器

    <!DOCTYPE html> <html> <body> <header> <meta http-equiv="Content-Typ ...

  9. 杂项:CMM

    ylbtech-杂项:CMM CMM是指“能力成熟度模型”,其英文全称为Capability Maturity Model for Software,英文缩写为SW-CMM,简称CMM.它是对于软件组 ...

  10. 37.Qt网络与通信

    1 获取本机网络与通信 在网络应用中,经常需要获得本机的主机名.IP地址和硬件地址等网络信息.运用QHostInfo,QNetWorkInterface,QNetworkAddressEntry可获得 ...