Creating a React 360 App for Visualizing 3D models

Thanks for reading…

To get started let’s go ahead and set up React and Download the necessary frameworks —

npm install -g react-360-cli
CD Blogposts 
react-360 init My3DProject
cd My3DProject

Exploring the Code

If you run

NPM Start
React 360 Baseline Homepage
import React from 'react';import {AppRegistry,StyleSheet,Text,View,} from 'react-360';export default class My3DProject extends React.Component {render() {return (<View style={styles.panel}><View style={styles.greetingBox}><Text style={styles.greeting}>Welcome to React 360</Text></View></View>);}};const styles = StyleSheet.create({panel: {// Fill the entire surfacewidth: 1000,height: 600,backgroundColor: 'rgba(255, 255, 255, 0.4)',justifyContent: 'center',alignItems: 'center',},greetingBox: {padding: 20,backgroundColor: '#000000',borderColor: '#639dda',borderWidth: 2,},greeting: {fontSize: 30,},});AppRegistry.registerComponent('My3DProject', () => My3DProject);
AppRegistry.registerComponent('My3DProject', () => My3DProject);
import {ReactInstance} from 'react-360-web';function init(bundle, parent, options = {}) {const r360 = new ReactInstance(bundle, parent, {// Add custom options herefullScreen: true,...options,});// Render your app content to the default cylinder surfacer360.renderToSurface(r360.createRoot('My3DProject', { /* initial props */ }),r360.getDefaultSurface());// Load the initial environmentr360.compositor.setBackground(r360.getAssetURL('360_world.jpg'));}window.React360 = {init};
r360.renderToSurface(r360.createRoot('My3DProject', { /* initial props */ }),r360.getDefaultSurface()
);

Modifying the document

Under the function, you will see the following line

r360.compositor.setBackground(r360.getAssetURL('360_world.jpg'));
/index.jsconst styles = StyleSheet.create({panel: {// Fill the entire surfacewidth: 1000,height: 200,backgroundColor: 'rgba(255, 255, 255, 0.4)',justifyContent: 'center',alignItems: 'center',},greetingBox: {padding: 20,backgroundColor: 'rgba(255, 255, 255, 0.1)',borderColor: '#00B0FF',borderWidth: 2,},greeting: {fontSize: 80,},});
import {asset, Entity} from 'react-360'
<Entitysource={{obj: asset('Plane.obj'),mtl: asset('Plane.mtl')}}
/>
import React from 'React'import {asset, Entity} from 'react-360'export default class Plane extends React.Component{render(){return(<View><Entitysource={{obj: asset('Plane.obj'),mtl: asset('Plane.mtl')}}style={{transform:[{scaleX: 0.05 },{ scaleY: 0.05 },{ scaleZ: 0.05 },]}}/></View>)}}
import Plane from './entities/Plane'
AppRegistry.registerComponent('Plane', () => Plane);
client.js
const location = new Location([0, -1, -2]);
const location = new Location([0, -1, -2]);r360.renderToLocation(r360.createRoot(‘Plane’),location,);

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store