[ReactVR] Add Shapes Using 3D Primitives in React VR
React VR ships with a handful of 3D primitives. We'll import
primitives 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的更多相关文章
- [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 ...
- [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] 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 ...
- React VR 技术开发群 579149907
React VR 技术开发群 579149907,欢迎加入讨论!分享经验!
- [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 ...
- 平面之后3D成主流?VR全景表示不服!——全景智慧城市常诚
目前很多人对VR全景这个词汇没有明确的概念,更没有人做过全面的研究,VR全景是什么?VR全景可以做什么?不同于我们经常听到的VR色情,全景智慧城市常诚今天就来为各位做一个系统全面的介绍,深入了解之后, ...
- Three.js 快速上手以及在 React 中运用[转]
https://juejin.im/post/5ca22692f265da30a53d6656 github 的地址 欢迎 star! 之前项目中用到了 3D 模型演示的问题,整理了一下之前学习总结以 ...
- react与jQuery对比,有空的时候再翻译一下
参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-t ...
- React Route
有幸你能看来我的这篇文章,这篇文章是继React后面写的Reactroute,所以你需要看看我前面整理的React笔记再来看Reactroute可能更容易 All the work we've don ...
随机推荐
- iOS-获取Model(设备型号)、Version(设备版本)、app(程序版本)等
IOS-获取Model(设备型号).Version(设备版本).app(程序版本)等 NSLog(@"uniqueIdentifier: %@", [[UIDevice curre ...
- RecyclerView的点击事件
RecyclerView 一.简单介绍 这个是谷歌官方出的控件.使我们能够很easy的做出列表装的一个控件,当然recyclerview的功能不止这些,它还能够做出瀑布流的效果,这是一个很强大的控件, ...
- Chrome插件开发新手教程
近期在用百词斩这个站点来学单词,感觉非常不错,就是在回想单词列表的时候仅仅有单词和意思.却没有读音.感觉非常不方便,思来思去,想到了Chrome插件能够胜任这个工作.于是小小的研究了一下. Chrom ...
- NSAttributedString编程
- (void)viewDidLoad { [super viewDidLoad]; NSMutableAttributedString *attributedString ...
- 避免ANR异常
避免ANR异常 不要在主线程中执行耗时的代码,不然很容易出现anr错误. 原因: 解决方法:
- db file sequential read等待事件 --转载
db file sequential read db file sequential read等待事件有3个参数:file#,first block#,和block数量.在10g中,这等待事件受到用户 ...
- oracle (9I/10G/11G)数据库日志挖掘(审计误操作)
文档结构: 资料来自官方网站: https://docs.oracle.com/cd/E11882_01/server.112/e22490/logminer.htm#SUTIL019 来自论坛: h ...
- Android设计模式——单例模式
1.单例模式就是确保一个类,只有一个实例化对象,而且自行实例化并向整个系统提供这个实例. 2.使用场景: 确保某个类,有且只有一个对象,避免产生对个对象,消耗过多的资源. 2.实现单例模式的重要点: ...
- CorelDRAW X6最新注册激活机制
最近购买CorelDRAW X6的小伙伴可能对如何注册激活软件存在疑惑,下面小编一步步教您如何快速激活CorelDRAW X6. CorelDRAW X6最新注册机制如下: 1.关注“Corel服务中 ...
- CSS背景使用,引入、尺寸、平铺、定位、多重背景
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...