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 VRPanoramaViewerProps { src : string ; radius : number ; height : number ; } class VRPanoramaViewer extends React . Component < VRPanoramaViewerProps , any > { render ( ) { let w = window . innerWidth ; let h = window . innerHeight ; let cameraName = "camera" ; let panoramaTexture = THREE . ImageUtils . loadTexture ( this . props . src ) ; panoramaTexture . minFilter = THREE . NearestFilter ; let numCylinderSegments = 128 ; let panorama = < R3 . Mesh geometry = { new THREE . CylinderGeometry ( this . props . radius , this . props . radius , this . props . height , numCylinderSegments , 1 , true ) } material = { new THREE . MeshBasicMaterial ( { map : panoramaTexture } ) } position = { new THREE . Vector3 ( 0 , 0 , 0 ) } scale = { new THREE . Vector3 ( - 1 , 1 , 1 ) } / > ; return ( < R3 . Scene width = { w } height = { h } camera = "maincamera" orbitControls = { THREEOrbitControls } VRControls = { THREEVRControls } effect = { THREEStereoEffect } > < R3 . PerspectiveCamera name = "maincamera" fov = { 75 } aspect = { w / h } near = { 1 } far = { 5000 } position = { new THREE . Vector3 ( 0 , 0 , 0 ) } lookat = { new THREE . Vector3 ( 0 , 0 , 1 ) } / > { panorama } < /R3.Scene>); } } export = VRPanoramaViewer ;