import * as React from "react" ; let R3 = require ( "react-three" ) ; import * as THREE from "three" ; let THREEOrbitControls = require ( "three-orbit-controls" ) ( THREE ) ; let THREEStereoEffect = require ( "imports?THREE=three!exports?THREE.StereoEffect!../../bower_components/three.js/examples/js/effects/StereoEffect" ) ; let THREEVRControls = require ( "imports?THREE=three!exports?THREE.VRControls!../../bower_components/three.js/examples/js/controls/VRControls" ) ; window . THREE = THREE ; require ( "webvr-polyfill" ) ; interface VRObjectViewerProps { geometry : THREE . Geometry ; material : THREE . Material ; scale : THREE . Vector3 ; } class VRObjectViewer extends React . Component < VRObjectViewerProps , any > { render ( ) { let w = window . innerWidth ; let h = window . innerHeight ; let objectName = "object" ; let cameraName = "camera" ; return ( < R3 . Scene width = { w } height = { h } camera = { cameraName } orbitControls = { THREEOrbitControls } VRControls = { THREEVRControls } VRControlsTarget = { objectName } effect = { THREEStereoEffect } > < R3 . PerspectiveCamera name = { cameraName } fov = { 75 } aspect = { w / h } near = { 1 } far = { 5000 } position = { new THREE . Vector3 ( 0 , 0 , 0 ) } lookat = { new THREE . Vector3 ( 0 , 0 , 1 ) } / > < R3 . Mesh name = { objectName } geometry = { this . props . geometry } material = { this . props . material } scale = { this . props . scale } position = { new THREE . Vector3 ( 0 , 5 , - 10 ) } / > < /R3.Scene>); } } export = VRObjectViewer ;