React VR ships with a handful of 3D primitives. We'll importprimitives like <Sphere/><Box/><Cylinder/>, and <Plane/> and explore how they can positioned in a three dimensional space.

We'll also check out some of their properties that let us change their size and polygon counts. However we are not limited to simply changing their geometry! We'll see how we can change material and texture options as well.

import React from 'react';
import {
AppRegistry,
asset,
Pano,
Text,
View,
Image,
Sphere,
PointLight,
} from 'react-vr'; export default class app extends React.Component {
render() {
return (
<View>
<Sphere
style={{
color: 'lightblue',
transform: [{translateZ: -2}]
}}
lit
heightSegments={20}
widthSegments={20}
></Sphere>
<PointLight
intensity={1}
style={{transform: [{translate: [0, 700, 700]}]}}
></PointLight>
</View>
);
}
}; AppRegistry.registerComponent('app', () => app);

Add texture for earth:

        <Sphere
style={{
color: 'lightblue',
transform: [{translateZ: -2}]
}}
lit
texture={asset('earth.jpg')}
heightSegments={20}
widthSegments={20}
></Sphere>

[ReactVR] Add Shapes Using 3D Primitives in React VR的更多相关文章

  1. [ReactVR] Add Lighting Using Light Components in React VR

    In order to illuminate a scene containing 3D objects a lighting setup is required. In this lesson we ...

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

  3. [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 tak ...

  4. React VR 技术开发群 579149907

    React VR 技术开发群 579149907,欢迎加入讨论!分享经验!

  5. [ReactVR] Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

    Motion is an important aspect of a complete immersive experience, therefor we are going to look into ...

  6. 平面之后3D成主流?VR全景表示不服!——全景智慧城市常诚

    目前很多人对VR全景这个词汇没有明确的概念,更没有人做过全面的研究,VR全景是什么?VR全景可以做什么?不同于我们经常听到的VR色情,全景智慧城市常诚今天就来为各位做一个系统全面的介绍,深入了解之后, ...

  7. Three.js 快速上手以及在 React 中运用[转]

    https://juejin.im/post/5ca22692f265da30a53d6656 github 的地址 欢迎 star! 之前项目中用到了 3D 模型演示的问题,整理了一下之前学习总结以 ...

  8. react与jQuery对比,有空的时候再翻译一下

    参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-t ...

  9. React Route

    有幸你能看来我的这篇文章,这篇文章是继React后面写的Reactroute,所以你需要看看我前面整理的React笔记再来看Reactroute可能更容易 All the work we've don ...

随机推荐

  1. C# 中使用 Obsolete 标志 代码过期

    今天对项目做了一次更新,创建了一个新的类来替换原来的工作. 可是又不想删掉.一旦删掉在SVN上就不存在了.决定还是用 Obsolete来标志代码过期吧. MSDN上关于Obsolete 标签的介绍 h ...

  2. NOI.AC: NOIP2018 全国模拟赛习题练习

    闲谈: 最后一个星期还是不浪了,做一下模拟赛(还是有点小虚) #30.candy 题目: 有一个人想买糖吃,有两家商店A,B,A商店中第i个糖果的愉悦度为Ai,B商店中第i个糖果的愉悦度为Bi 给出n ...

  3. kentico7中设置网站的主页

    打开SiteManager,选择Settings,然后左上角选择具体的网站,Content,Web Site Content,Default alias path

  4. weblogic状态监控脚本

    echo "======================================welcome============================================ ...

  5. ROS-VIM

    在终端输入:vimtutor,进入学习教程. 常用快捷键: a 编辑模式; 编辑状态下 回车 换行; Ctrl+n 补全命令; x剪切; p复制; u撤销; :q!不保存退出; :wq保存并退出; 以 ...

  6. SQL Server 忘记登录账号解决方法

    [1] 停止SQL Server 服务 和 SQL Server Agent 服务 [2] 以管理员身份打开命令行,单用户模式启动服务.(在单用户模式下启动 SQL Server 可使计算机本地 Ad ...

  7. Java NIO(三)通道

    概念 通道(Channel)由java.nio.channels包定义的.channel表示IO源与目标打开的连接,类似流,但不能直接访问数据,只能与Buffer进行交互 通道类似流,但又有不同: 既 ...

  8. innobackupex: Error: --decompress requires qpress

    数据库版本:5.6.16​系统版本:cenos 6.5​​通过percona-xtranbackup恢复数据库报错(软件版本:percona-xtrabackup-2.1.9-744.rhel6.x8 ...

  9. POJ 1995 Raising Modulo Numbers 【快速幂取模】

    题目链接:http://poj.org/problem?id=1995 解题思路:用整数快速幂算法算出每一个 Ai^Bi,然后依次相加取模即可. #include<stdio.h> lon ...

  10. HDU 2037 今年暑假不AC【贪心】

    解题思路:即为给出一个总长度确定的区间,再输入不同的子区间,求在这个总区间里面包含的不相交的子区间最多有多少个. 可以由最特殊的情况来想,即给出的这些子区间现在都不相交,比如 ----- (1,3)  ...