Downloaded 33 times
![geildanke.com @fischaelameer import React from 'react'; import { AmbientLight, PointLight, View } from 'react-vr'; class Lightning extends React.Component { render() { return( <View> <AmbientLight intensity = { 1.2 } /> <PointLight intensity = { 0.25 } style = {{ color: '#ffffff', transform: [{ translate : [ 0, 4, 0.25 ] }] }} /> </View> ); } } module.exports = Lightning; Lightning.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-48-2048.jpg)
![geildanke.com @fischaelameer import React from 'react'; import { AmbientLight, PointLight, View } from 'react-vr'; class Lightning extends React.Component { render() { return( <View> <AmbientLight intensity = { 1.2 } /> <PointLight intensity = { 0.25 } style = {{ color: '#ffffff', transform: [{ translate : [ 0, 4, 0.25 ] }] }} /> </View> ); } } module.exports = Lightning; Lightning.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-49-2048.jpg)
![geildanke.com @fischaelameer import React from 'react'; import { AmbientLight, PointLight, View } from 'react-vr'; class Lightning extends React.Component { render() { return( <View> <AmbientLight intensity = { 1.2 } /> <PointLight intensity = { 0.25 } style = {{ color: '#ffffff', transform: [{ translate : [ 0, 4, 0.25 ] }] }} /> </View> ); } } module.exports = Lightning; Lightning.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-50-2048.jpg)
![geildanke.com @fischaelameer … render() { let scale = this.props.scale, translate = this.props.translate, wall = null, wallMat = {mesh:asset('wall.obj'), mtl:asset('wall.mtl'), lit: true}, windowMat = {mesh:asset('window.obj'), mtl:asset('window.mtl'), lit: true}; if (this.props.hasWindow && this.props.hasWindow === true) { wall = <Mesh style={{transform: [{translate: translate}, {scale: scale},],}} source={windowMat} />; } else { wall = <Mesh style={{transform: [{translate: translate}, {scale: scale},],}} source={wallMat} />; } return ( wall ); } … Wall.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-51-2048.jpg)
![geildanke.com @fischaelameer … import Wall from './Wall'; class Room extends React.Component { render() { return( <View> <Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} /> <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> <Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} /> </View> ); } } … Room.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-52-2048.jpg)
![geildanke.com @fischaelameer … import Wall from './Wall'; class Room extends React.Component { render() { return( <View> <Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} /> <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> <Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} /> </View> ); } } … <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> Room.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-53-2048.jpg)
![geildanke.com @fischaelameer … import Wall from './Wall'; class Room extends React.Component { render() { return( <View> <Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} /> <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> <Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} /> </View> ); } } … <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> Room.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-54-2048.jpg)
![geildanke.com @fischaelameer … import Wall from './Wall'; class Room extends React.Component { render() { return( <View> <Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} /> <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> <Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} /> </View> ); } } … <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> Room.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-55-2048.jpg)
![geildanke.com @fischaelameer x <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-56-2048.jpg)
![geildanke.com @fischaelameer y x <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-57-2048.jpg)
![geildanke.com @fischaelameer y x z <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-58-2048.jpg)
![geildanke.com @fischaelameer y x z <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-59-2048.jpg)
![geildanke.com @fischaelameer y x z 1 unit = 1 meter 1 1 1 <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-60-2048.jpg)
![geildanke.com @fischaelameer … for (let i = 0; i < iMax; i += 1) { images.push( <GalleryImage key={i} texture={config[i].texture} index={i} length={this.numberOfImages} width={this.imageWidth} /> ); } … GalleryImages.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-64-2048.jpg)
![geildanke.com @fischaelameer … for (let i = 0; i < iMax; i += 1) { images.push( <GalleryImage key={i} texture={config[i].texture} index={i} length={this.numberOfImages} width={this.imageWidth} /> ); } … … <View> {images} </View> … GalleryImages.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-65-2048.jpg)
![geildanke.com @fischaelameer … for (let i = 0; i < iMax; i += 1) { images.push( <GalleryImage key={i} texture={config[i].texture} index={i} length={this.numberOfImages} width={this.imageWidth} /> ); } … … <View style={{ flexDirection: 'row', }} > {images} </View> … GalleryImages.js](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-66-2048.jpg)
![geildanke.com @fischaelameer GalleryImages.js … class GalleryImages extends React.Component { constructor(props) { super(); this.state = { scrollValue: new Animated.Value(0), }; } componentWillMount() { Animated.timing( this.state.scrollValue, { toValue: 60, duration: 2000, easing: Easing.linear, } ).start(); } … … <Animated.View style={{ flexDirection: 'row', transform: [ {translateX: this.state.scrollValue}, ], }} > {images} </Animated.View> …](https://image.slidesharecdn.com/2017-03-13reactconf-170313214339/75/Goodbye-Flatland-An-introduction-to-React-VR-and-what-it-means-for-web-developers-71-2048.jpg)
Uploaded byGeilDanke
Goodbye, Flatland! An introduction to React VR and what it means for web developers
The document discusses the introduction of React VR and its significance for web developers, emphasizing how virtual reality transforms user interaction with technology. It provides technical insights into VR concepts, UI components, and practical examples of implementation using React VR. Additionally, it highlights the creative potentials and various programming aspects associated with developing VR applications.
Goodbye, Flatland! An introduction to React VR and what it means for web developers
- 1. geildanke.com @fischaelameer MICHAELA LEHR Founder· Geil,Danke! · Frontend Developer, UX Designer @fischaelameer Goodbye, Flatland! An introduction to React VR and what it means for web developers
- 2. geildanke.com @fischaelameer You shouldcare about WebVR.
- 3.
- 4.
- 5. geildanke.com @fischaelameer VR ConceptsReactVR UX Design & VR
- 6. geildanke.com @fischaelameer Virtual Realityis tricking our eyes and brain to think of a 2D image to be in 3D.
- 7. geildanke.com @fischaelameer Virtual Realitychanges the way we relate to technology.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. geildanke.com @fischaelameer IPD –Interpupillary distance
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. geildanke.com @fischaelameer x: 0,y: 0, z: 0
- 32. geildanke.com @fischaelameer x: 0,y: 0, z: 0
- 33.
- 34. geildanke.com @fischaelameer npm install-g react-vr-cli react-vr init GEILDANKE_REACTVR_PANO cd GEILDANKE_REACTVR_PANORAMA npm start
- 35. geildanke.com @fischaelameer /GEILDANKE_REACTVR_PANO !"" index.vr.js !""node_modules !"" package.json !"" postinstall.js !"" rn-cli.config.js !"" static_assets # %"" vr-mountain.jpg %"" vr !"" client.js %"" index.html
- 36. geildanke.com @fischaelameer import Reactfrom 'react'; import { AppRegistry, asset, Pano, View } from 'react-vr'; class GEILDANKE_REACTVR_PANO extends React.Component { render() { return ( <View> <Pano source = { asset('vr-mountain.jpg') }/> </View> ); } }; AppRegistry.registerComponent('GEILDANKE_REACTVR_PANO', () => GEILDANKE_REACTVR_PANO); index.vr.js
- 37.
- 38.
- 39. geildanke.com @fischaelameer It wasthe pioneer days; people had to make their own interrogation rooms. Out of cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,' it's not because I want you or because I can't have you. It's my estimation that every man ever got a statue made of him was one kind of sommbitch or another. Oh my god you will never believe what happened at school today. From beneath you, it devours. I am never gonna see a merman, ever. It was supposed to confuse him, but it just made him peppy. It was like the Heimlich, with stripes! How did your brain even learn human speech? I'm just so curious. Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's ludicrous to have these interlocking bodies and not...interlock. I just don't see why everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky world that still makes sense to me. You are talking crazy-person talk. http://www.commercekitchen.com/whedon-ipsum/
- 40. geildanke.com @fischaelameer It wasthe pioneer days; people had to make their own interrogation rooms. Out of cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,' it's not because I want you or because I can't have you. It's my estimation that every man ever got a statue made of him was one kind of sommbitch or another. Oh my god you will never believe what happened at school today. From beneath you, it devours. I am never gonna see a merman, ever. It was supposed to confuse him, but it just made him peppy. It was like the Heimlich, with stripes! How did your brain even learn human speech? I'm just so curious. Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's ludicrous to have these interlocking bodies and not...interlock. I just don't see why everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky world that still makes sense to me. You are talking crazy-person talk. http://www.commercekitchen.com/whedon-ipsum/
- 41.
- 42.
- 43. geildanke.com @fischaelameer Goodbye, UXmetaphors!
- 44. geildanke.com @fischaelameer Goodbye, UXmetaphors!
- 45. geildanke.com @fischaelameer Goodbye, UXmetaphors!
- 46.
- 47. geildanke.com @fischaelameer import Reactfrom 'react'; import { AppRegistry, asset, View } from 'react-vr'; import Images from './Images'; import Lightning from './Lightning'; import Room from './Room'; import UI from './UI'; import World from './World'; class GEILDANKE_REACTVR_GALLERY extends React.Component { render() { return ( <View> <Lightning /> <World /> <Room /> <Images /> <UI /> </View> ); } }; AppRegistry.registerComponent('GEILDANKE_REACTVR_GALLERY', () => GEILDANKE_REACTVR_GALLERY); index.vr.js
- 48. geildanke.com @fischaelameer import Reactfrom 'react'; import { AmbientLight, PointLight, View } from 'react-vr'; class Lightning extends React.Component { render() { return( <View> <AmbientLight intensity = { 1.2 } /> <PointLight intensity = { 0.25 } style = {{ color: '#ffffff', transform: [{ translate : [ 0, 4, 0.25 ] }] }} /> </View> ); } } module.exports = Lightning; Lightning.js
- 49. geildanke.com @fischaelameer import Reactfrom 'react'; import { AmbientLight, PointLight, View } from 'react-vr'; class Lightning extends React.Component { render() { return( <View> <AmbientLight intensity = { 1.2 } /> <PointLight intensity = { 0.25 } style = {{ color: '#ffffff', transform: [{ translate : [ 0, 4, 0.25 ] }] }} /> </View> ); } } module.exports = Lightning; Lightning.js
- 50. geildanke.com @fischaelameer import Reactfrom 'react'; import { AmbientLight, PointLight, View } from 'react-vr'; class Lightning extends React.Component { render() { return( <View> <AmbientLight intensity = { 1.2 } /> <PointLight intensity = { 0.25 } style = {{ color: '#ffffff', transform: [{ translate : [ 0, 4, 0.25 ] }] }} /> </View> ); } } module.exports = Lightning; Lightning.js
- 51. geildanke.com @fischaelameer … render() { letscale = this.props.scale, translate = this.props.translate, wall = null, wallMat = {mesh:asset('wall.obj'), mtl:asset('wall.mtl'), lit: true}, windowMat = {mesh:asset('window.obj'), mtl:asset('window.mtl'), lit: true}; if (this.props.hasWindow && this.props.hasWindow === true) { wall = <Mesh style={{transform: [{translate: translate}, {scale: scale},],}} source={windowMat} />; } else { wall = <Mesh style={{transform: [{translate: translate}, {scale: scale},],}} source={wallMat} />; } return ( wall ); } … Wall.js
- 52. geildanke.com @fischaelameer … import Wallfrom './Wall'; class Room extends React.Component { render() { return( <View> <Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} /> <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> <Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} /> </View> ); } } … Room.js
- 53. geildanke.com @fischaelameer … import Wallfrom './Wall'; class Room extends React.Component { render() { return( <View> <Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} /> <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> <Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} /> </View> ); } } … <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> Room.js
- 54. geildanke.com @fischaelameer … import Wallfrom './Wall'; class Room extends React.Component { render() { return( <View> <Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} /> <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> <Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} /> </View> ); } } … <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> Room.js
- 55. geildanke.com @fischaelameer … import Wallfrom './Wall'; class Room extends React.Component { render() { return( <View> <Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} /> <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> <Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} /> <Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} /> </View> ); } } … <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} /> Room.js
- 56. geildanke.com @fischaelameer x <Wall scale={[5,3, 0.2]} translate={[0, 0, -5]} />
- 57. geildanke.com @fischaelameer y x <Wall scale={[5,3, 0.2]} translate={[0, 0, -5]} />
- 58. geildanke.com @fischaelameer y x z <Wall scale={[5,3, 0.2]} translate={[0, 0, -5]} />
- 59. geildanke.com @fischaelameer y x z <Wall scale={[5,3, 0.2]} translate={[0, 0, -5]} />
- 60. geildanke.com @fischaelameer y x z 1unit = 1 meter 1 1 1 <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
- 61. geildanke.com @fischaelameer 3D CoordinateSystem, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
- 62. geildanke.com @fischaelameer 3D CoordinateSystem, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
- 63. geildanke.com @fischaelameer … let texture= this.props.texture, imageWidth = this.props.width; <Image style={{ margin: 0.05, width: imageWidth, height: imageWidth, }} source={texture} /> … GalleryImage.js
- 64. geildanke.com @fischaelameer … for (leti = 0; i < iMax; i += 1) { images.push( <GalleryImage key={i} texture={config[i].texture} index={i} length={this.numberOfImages} width={this.imageWidth} /> ); } … GalleryImages.js
- 65. geildanke.com @fischaelameer … for (leti = 0; i < iMax; i += 1) { images.push( <GalleryImage key={i} texture={config[i].texture} index={i} length={this.numberOfImages} width={this.imageWidth} /> ); } … … <View> {images} </View> … GalleryImages.js
- 66. geildanke.com @fischaelameer … for (leti = 0; i < iMax; i += 1) { images.push( <GalleryImage key={i} texture={config[i].texture} index={i} length={this.numberOfImages} width={this.imageWidth} /> ); } … … <View style={{ flexDirection: 'row', }} > {images} </View> … GalleryImages.js
- 67.
- 68. geildanke.com @fischaelameer 3D CoordinateSystem, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
- 69. geildanke.com @fischaelameer 3D CoordinateSystem, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
- 70. geildanke.com @fischaelameer GalleryImages.js … class GalleryImagesextends React.Component { constructor(props) { super(); this.state = { scrollValue: new Animated.Value(0), }; } componentWillMount() { Animated.timing( this.state.scrollValue, { toValue: 60, duration: 2000, easing: Easing.linear, } ).start(); } …
- 71. geildanke.com @fischaelameer GalleryImages.js … class GalleryImagesextends React.Component { constructor(props) { super(); this.state = { scrollValue: new Animated.Value(0), }; } componentWillMount() { Animated.timing( this.state.scrollValue, { toValue: 60, duration: 2000, easing: Easing.linear, } ).start(); } … … <Animated.View style={{ flexDirection: 'row', transform: [ {translateX: this.state.scrollValue}, ], }} > {images} </Animated.View> …
- 72. geildanke.com @fischaelameer 3D CoordinateSystem, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
- 73. geildanke.com @fischaelameer View Image Core Components Pano Mesh ReactVR Components AmbientLight, PointLight,
- 74. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh ReactVR Components AmbientLight, PointLight,
- 75. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh ReactVR Components AmbientLight, PointLight, DirectionalLight, SpotLight
- 76. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh ReactVR Components VrButton AmbientLight, PointLight, DirectionalLight, SpotLight
- 77. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh ReactVR Components VrButton AmbientLight, PointLight, DirectionalLight, SpotLight Sound
- 78.
- 79.
- 80.
- 81.
- 82. geildanke.com @fischaelameer It wasthe pioneer days; people had to make their own interrogation rooms. Out of cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,' it's not because I want you or because I can't have you. It's my estimation that every man ever got a statue made of him was one kind of sommbitch or another. Oh my god you will never believe what happened at school today. From beneath you, it devours. I am never gonna see a merman, ever. It was supposed to confuse him, but it just made him peppy. It was like the Heimlich, with stripes! How did your brain even learn human speech? I'm just so curious. Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's ludicrous to have these interlocking bodies and not...interlock. I just don't see why everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky world that still makes sense to me. You are talking crazy-person talk. http://www.commercekitchen.com/whedon-ipsum/
- 83.
- 84.
- 85.
- 86.
- 87.
- 88. geildanke.com @fischaelameer 130° Comfortably bending30° to each side
- 89. geildanke.com @fischaelameer 230° Stretching 80°to each side https://www.youtube.com/watch?v=00vzW2-PvvE
- 90.
- 91.
- 92. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 93. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 94. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 95. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 96. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 97. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 98. geildanke.com @fischaelameerIcon madeby Freepik from www.flaticon.com
- 99. geildanke.com @fischaelameerIcon madeby Freepik from www.flaticon.com
- 100.
- 101.
- 102. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 103. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 104. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 105. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 106. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 107. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 108. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 109. geildanke.com @fischaelameer You areresponsible for the well-being of your users!
- 110. geildanke.com @fischaelameer http://www.uxofvr.com/ https://iswebvrready.org/ General information https://webvr-slack.herokuapp.com/ https://www.reddit.com/r/reactvr/ Community https://www.reddit.com/r/WebVR/ https://w3c.github.io/webvr/ https://github.com/googlevr/webvr-polyfill https://threejs.org/ API,frameworks, libraries https://facebookincubator.github.io/react-vr/index.html https://facebookincubator.github.io/react-vr/docs/getting-started.html https://github.com/facebookincubator/react-vr
- 111.