import * as React from "react" ; import * as ReactDOM from "react-dom" ; import * as THREE from "three" ; import VRObjectViewer = require ( "./components/VRObjectViewer" ) ; import VRModeButton = require ( "./components/VRModeButton" ) ; let THREETeapotBufferGeometry = require ( "imports?THREE=three!exports?THREE.TeapotBufferGeometry!../bower_components/three.js/examples/js/geometries/TeapotBufferGeometry" ) ; class App extends React . Component < any , any > { render ( ) { let teapotSize = 1 ; let newTess = 15 ; let bottom = false ; let lid = true ; let body = true ; let fitLid = false ; let nonblinn = false ; let teapotGeometry = new THREETeapotBufferGeometry ( teapotSize , newTess , bottom , lid , body , fitLid , nonblinn ) ; let button = ( < VRModeButton imageSrc = "teapot-preview.png" > < VRObjectViewer geometry = { teapotGeometry } material = { new THREE . MeshBasicMaterial ( { color : 0x00ff00 , wireframe : true , } ) } scale = { new THREE . Vector3 ( - 1.25 , 1.25 , 1.25 ) } / > < /VRModeButton>); return ( < div > < img src = "ecommerce.jpg" / > < div style = { { position : "absolute" , zIndex : 10 , left : 25 , top : 360 , } } > { button } < /div> < /div>); } } function mount ( ) { var container = document . getElementById ( "app" ) ; if ( container == null ) { container = document . createElement ( "div" ) ; document . body . appendChild ( container ) ; } let c = React . createFactory ( App ) ; ReactDOM . render ( c ( ) , container ) ; } document . addEventListener ( "DOMContentLoaded" , mount ) ;