Creating a React 360 App for Visualizing 3D models

Exploring the React 360 Framework and 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,);

Designer, Developer, Musician.

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