prison-cell-vr
Version:
Amnesty International Prison Cell Virtual Reality Project.
130 lines (108 loc) • 6.76 kB
JavaScript
import 'aframe';
import 'aframe-animation-component';
import 'babel-polyfill';
import {Entity, Scene} from 'aframe-react';
import React from 'react';
import ReactDOM from 'react-dom';
import $ from "jquery";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {color: 'red'};
$(document).ready(function() {
// -- sounds / start
var sounds = [];
$('.noise').each(function(index) {
// console.log( index + ": " + $(this).attr('id') );
sounds.push($(this).attr('id'));
});
var soundsCount = sounds.length;
var soundPositions = [
{x:0, y:2, z:-12},
{x:-14, y:2, z:-12},
{x:14, y:2, z:-12},
{x:0, y:2, z:14},
{x:14, y:2, z:14},
{x:-14, y:2, z:14}
];
var i = 0;
var soundsInterval = setInterval(function() {
$('#'+sounds[i])[0].components.position.data = soundPositions[Math.floor(Math.random() * soundPositions.length)];
// console.log($('#'+sounds[i])[0].components.position.data);
$('#'+sounds[i])[0].components.sound.playSound();
console.log('aweille');
if(i == soundsCount-1) {
i = 0;
}else{
i++;
}
}, 6000);
// -- sounds / end
// -- voices / start
var voices = [];
$('.voice').each(function(index) {
// console.log( index + ": " + $(this).attr('id') );
voices.push($(this).attr('id'));
});
var voicesCount = voices.length;
var j = 0;
var voicesInterval = setInterval(function() {
$('#'+voices[j])[0].components.sound.playSound();
if(j == voicesCount-1) {
j = 0;
}else{
j++;
}
}, 10000);
// -- voices / end
});
}
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="skyTexture" src="images/prison.jpg"/>
</a-assets>
<Entity primitive="a-sky" src="#skyTexture" />
{/* <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> */}
<a-sound src="src: url(https://cdn.glitch.com/453c996d-97fb-4c8e-8768-737c9a6c98e9%2Fambient.mp3?1509834219559)" autoplay="true" distancemodel="inverse" position="0 0 0" volume="0.2" loop="true"></a-sound>
<a-sound id="noise01" class="noise" src="src: url(https://cdn.glitch.com/453c996d-97fb-4c8e-8768-737c9a6c98e9%2Fprison-noise-01.mp3?1510415087142)" autoplay="false" distancemodel="inverse" position="0 2 -12" loop="false"></a-sound>
<a-sound id="noise02" class="noise" src="src: url(https://cdn.glitch.com/453c996d-97fb-4c8e-8768-737c9a6c98e9%2Fprison-noise-02.mp3?1510241837422)" autoplay="false" distancemodel="inverse" position="0 2 -12" loop="false"></a-sound>
<a-sound id="noise03" class="noise" src="src: url(https://cdn.glitch.com/453c996d-97fb-4c8e-8768-737c9a6c98e9%2Fprison-noise-03.mp3?1509836122114)" autoplay="false" distancemodel="inverse" position="0 2 -12" loop="false"></a-sound>
<a-sound id="noise04" class="noise" src="src: url(https://cdn.glitch.com/453c996d-97fb-4c8e-8768-737c9a6c98e9%2Fprison-noise-04.mp3?1510241837412)" autoplay="false" distancemodel="inverse" position="0 2 -12" loop="false"></a-sound>
<a-sound id="noise-porte" class="noise" src="src: url(https://cdn.glitch.com/453c996d-97fb-4c8e-8768-737c9a6c98e9%2Fprison-porte.mp3?1510241837499)" autoplay="false" distancemodel="inverse" position="0 2 -12" loop="false"></a-sound>
<a-sound id="noise-chaine" class="noise" src="src: url(https://cdn.glitch.com/453c996d-97fb-4c8e-8768-737c9a6c98e9%2Fprison-chaine.mp3?1510241837833)" autoplay="false" distancemodel="inverse" position="0 2 -12" loop="false"></a-sound>
<a-sound id="noise-goute" class="noise" src="src: url(https://cdn.glitch.com/453c996d-97fb-4c8e-8768-737c9a6c98e9%2Fprison-goute.mp3?1510241837976)" autoplay="false" distancemodel="inverse" position="0 2 -12" loop="false"></a-sound>
<a-sound id="noise-goute-echo" class="noise" src="src: url(https://cdn.glitch.com/453c996d-97fb-4c8e-8768-737c9a6c98e9%2Fprison-goute-echo.mp3?1510241837705)" autoplay="false" distancemodel="inverse" position="0 2 -12" loop="false"></a-sound>
<a-sound id="voice-cold" class="voice" src="src: url(sounds/voice-cold.mp3)" autoplay="false" distancemodel="inverse" position="0 0 0" loop="false" volume="0.3"></a-sound>
<a-sound id="voice-crazy" class="voice" src="src: url(sounds/voice-crazy.mp3)" autoplay="false" distancemodel="inverse" position="0 0 0" loop="false" volume="0.3"></a-sound>
<a-sound id="voice-fear" class="voice" src="src: url(sounds/voice-fear.mp3)" autoplay="false" distancemodel="inverse" position="0 0 0" loop="false" volume="0.3"></a-sound>
<a-sound id="voice-help" class="voice" src="src: url(sounds/voice-help.mp3)" autoplay="false" distancemodel="inverse" position="0 0 0" loop="false" volume="0.3"></a-sound>
<a-sound id="voice-pity" class="voice" src="src: url(sounds/voice-pity.mp3)" autoplay="false" distancemodel="inverse" position="0 0 0" loop="false" volume="0.3"></a-sound>
<a-sound id="voice-someone" class="voice" src="src: url(sounds/voice-someone.mp3)" autoplay="false" distancemodel="inverse" position="0 0 0" loop="false" volume="0.3"></a-sound>
<a-sound id="voice-why" class="voice" src="src: url(sounds/voice-why.mp3)" autoplay="false" distancemodel="inverse" position="0 0 0" loop="false" volume="0.3"></a-sound>
<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'));