[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 ...
随机推荐
- 用户体验之如何优化你的APP
用户体验,速度为王,来几个优化APP“速度”的建议. 1.后台执行 毋庸多言,已是通常做法. 一般在执行下载任务时让其在后台运营,让用户有精力去做别的事情. 后端加载 2.提前显示 客户端与WEB的数 ...
- [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 ...
- 单词数 (STL set集合)
单词数 Problem Description lily的好朋友xiaoou333近期非常空.他想了一件没有什么意义的事情.就是统计一篇文章里不同单词的总数.以下你的任务是帮助xiaoou333解决问 ...
- 不做Next,争做Nest——庆科首届智能硬件创新设计大赛产生决赛12强
智能硬件,Wi-Fi互联,谁是下一个Nest?邀你共见证! 2014年3月到7月.由上海庆科信息技术有限公司主办的首届 MXCHIP 智能硬件创新设计大赛--"寻找下一个nest&quo ...
- Django学习笔记(一)——安装,创建项目,配置
疯狂的暑假学习之 Django学习笔记(一) 教材 书<The Django Book> 视频:csvt Django视频 1.创建项目 django‐admin.py startpro ...
- 深刻理解Nginx之基本配置和升级(2)
3 Nginx基本配置 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvam9obl9mX2xhdQ==/font/5a6L5L2T/fontsize/400 ...
- svn 服务器的搭建
SVN服务器运行模式:模式1:svn服务器单独运行 监听: 3690端口 访问: svn://IP模式2: svn 服务器+ apache : 80 端口 访问: http://IP ...
- 原来C++之父在大摩工作呀,并且还是总经理。。
摩根士丹利信息技术部门简历接收即将截止.请同学们抓紧投递 摩根士丹利9月.10月将在中国各大高校举办包含技术讲座.信息分享会以及校园宣讲会在 内的一系列校园活动.同学们将有机会和摩根士丹利高管以及返校 ...
- HDU 2054 A==B? 大数
Problem Description Give you two numbers A and B, if A is equal to B, you should print "YES&quo ...
- HTTP Error 500.19
HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed because the related ...