/
index.js
57 lines (50 loc) · 2.26 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import 'aframe';
import 'aframe-animation-component';
import 'aframe-particle-system-component';
import 'babel-polyfill';
import {Entity, Scene} from 'aframe-react';
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {color: 'red'};
}
changeColor() {
const colors = ['red', 'orange', 'yellow', 'green', 'blue'];
this.setState({
color: colors[Math.floor(Math.random() * colors.length)]
});
}
render () {
return (
<Scene>
<a-assets>
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg"/>
<img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg"/>
</a-assets>
<Entity primitive="a-plane" src="#groundTexture" rotation="-90 0 0" height="100" width="100"/>
<Entity primitive="a-light" type="ambient" color="#445451"/>
<Entity primitive="a-light" type="point" intensity="2" position="2 4 4"/>
<Entity primitive="a-sky" height="2048" radius="30" src="#skyTexture" theta-length="90" width="2048"/>
<Entity particle-system={{preset: 'snow', particleCount: 2000}}/>
<Entity text={{value: 'Hello, A-Frame React!', align: 'center'}} position={{x: 0, y: 2, z: -1}}/>
<Entity id="box"
geometry={{primitive: 'box'}}
material={{color: this.state.color, opacity: 0.6}}
animation__rotate={{property: 'rotation', dur: 2000, loop: true, to: '360 360 360'}}
animation__scale={{property: 'scale', dir: 'alternate', dur: 100, loop: true, to: '1.1 1.1 1.1'}}
position={{x: 0, y: 1, z: -3}}
events={{click: this.changeColor.bind(this)}}>
<Entity animation__scale={{property: 'scale', dir: 'alternate', dur: 100, loop: true, to: '2 2 2'}}
geometry={{primitive: 'box', depth: 0.2, height: 0.2, width: 0.2}}
material={{color: '#24CAFF'}}/>
</Entity>
<Entity primitive="a-camera">
<Entity primitive="a-cursor" animation__click={{property: 'scale', startEvents: 'click', from: '0.1 0.1 0.1', to: '1 1 1', dur: 150}}/>
</Entity>
</Scene>
);
}
}
ReactDOM.render(<App/>, document.querySelector('#sceneContainer'));