121 lines
2.8 KiB
JavaScript
121 lines
2.8 KiB
JavaScript
import React from "react"
|
|
import { StyleSheet, View, TouchableHighlight, Image } from "react-native"
|
|
import {
|
|
ViroARSceneNavigator,
|
|
ViroARScene,
|
|
ViroARPlane,
|
|
ViroBox,
|
|
ViroNode,
|
|
ViroAmbientLight,
|
|
ViroSpotLight,
|
|
Viro3DObject,
|
|
ViroSurface,
|
|
} from "react-viro"
|
|
import autobind from "autobind-decorator"
|
|
import backImage from "./images/back.png"
|
|
|
|
const styles = {
|
|
buttons: {
|
|
height: 80,
|
|
width: 80,
|
|
},
|
|
}
|
|
|
|
const shapes = {
|
|
hardhat: {
|
|
shape: require("./models/hardhat_obj.obj"),
|
|
materials: [require("./models/hardhat.mtl")],
|
|
},
|
|
question: {
|
|
shape: require("./models/question_obj.obj"),
|
|
materials: [require("./models/question.mtl")],
|
|
},
|
|
clipboard: {
|
|
shape: require("./models/clipboard_obj.obj"),
|
|
materials: [require("./models/clipboard.mtl")],
|
|
},
|
|
}
|
|
|
|
class WorkItemSceneAR extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
position: [0, 0.2, 0],
|
|
scale: [0.2, 0.2, 0.2],
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<ViroARScene>
|
|
<ViroAmbientLight color="#ffffff" intensity={200} />
|
|
<ViroARPlane>
|
|
<ViroNode
|
|
visible={true}
|
|
position={this.state.position}
|
|
scale={this.state.scale}
|
|
key="hardhat">
|
|
<ViroSpotLight
|
|
innerAngle={5}
|
|
outerAngle={20}
|
|
direction={[0, -1, 0]}
|
|
position={[0, 4, 0]}
|
|
color="#ffffff"
|
|
castsShadow={true}
|
|
shadowNearZ={0.1}
|
|
shadowFarZ={6}
|
|
shadowOpacity={0.9}
|
|
/>
|
|
<Viro3DObject
|
|
position={[0, 0, 0]}
|
|
source={shapes["hardhat"].shape}
|
|
resources={shapes["hardhat"].materials}
|
|
type="OBJ"
|
|
/>
|
|
<ViroSurface
|
|
rotation={[-90, 0, 0]}
|
|
position={[0, -0.001, 0]}
|
|
width={2.5}
|
|
height={2.5}
|
|
arShadowReceiver={true}
|
|
ignoreEventHandling={true}
|
|
/>
|
|
</ViroNode>
|
|
</ViroARPlane>
|
|
</ViroARScene>
|
|
)
|
|
}
|
|
}
|
|
|
|
export class ARViewer extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
@autobind
|
|
_handlePress() {
|
|
this.props.history.replace("/")
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={{ width: "100%", height: "100%" }}>
|
|
<ViroARSceneNavigator
|
|
style={{ width: "100%", height: "100%" }}
|
|
apiKey="06F37B6A-74DA-4A83-965A-7DE2209A5C46"
|
|
initialScene={{ scene: WorkItemSceneAR }}
|
|
/>
|
|
|
|
<View style={{ position: "absolute", left: 30, right: 0, top: 50 }}>
|
|
<TouchableHighlight
|
|
style={styles.buttons}
|
|
onPress={this._handlePress}
|
|
underlayColor={"#00000000"}>
|
|
<Image source={backImage} />
|
|
</TouchableHighlight>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
}
|