Skip to content

Instantly share code, notes, and snippets.

@jabez007

jabez007/randomBabylon.html

Created March 7, 2019 19:47
Show Gist options
  • Save jabez007/7ddc3fd948e5390e62197197dcda1a8c to your computer and use it in GitHub Desktop.
Save jabez007/7ddc3fd948e5390e62197197dcda1a8c to your computer and use it in GitHub Desktop.
Download ZIP
Using Vue-Babylon to randomly rotate a cube of cubes
Raw
randomBabylon.html
<html>
<body>
<div id="app">
<Scene v-model="scene">
<Camera></Camera>
<HemisphericLight diffuse="#0000FF"></HemisphericLight>
<Entity :position="[0, 0, 0]">
<Animation property="rotation.x" :duration="duration">
<Key frame="0%" :value="0"></Key>
<Key frame="25%" :value="Math.PI * getRandom(0.25, 0.75) * getRandomInt(-1, 1)"></Key>
<Key frame="50%" :value="Math.PI * getRandom(0.75, 1.25) * getRandomInt(-1, 1)"></Key>
<Key frame="75%" :value="Math.PI * getRandom(1.25, 1.75) * getRandomInt(-1, 1)"></Key>
<Key frame="100%" :value="Math.PI * 2"></Key>
</Animation>
<Animation property="rotation.y" :duration="duration">
<Key frame="0%" :value="0"></Key>
<Key frame="25%" :value="Math.PI * getRandom(0.25, 0.75) * getRandomInt(-1, 1)"></Key>
<Key frame="50%" :value="Math.PI * getRandom(0.75, 1.25) * getRandomInt(-1, 1)"></Key>
<Key frame="75%" :value="Math.PI * getRandom(1.25, 1.75) * getRandomInt(-1, 1)"></Key>
<Key frame="100%" :value="Math.PI * 2"></Key>
</Animation>
<Animation property="rotation.z" :duration="duration">
<Key frame="0%" :value="0"></Key>
<Key frame="25%" :value="Math.PI * getRandom(0.25, 0.75) * getRandomInt(-1, 1)"></Key>
<Key frame="50%" :value="Math.PI * getRandom(0.75, 1.25) * getRandomInt(-1, 1)"></Key>
<Key frame="75%" :value="Math.PI * getRandom(1.25, 1.75) * getRandomInt(-1, 1)"></Key>
<Key frame="100%" :value="Math.PI * 2"></Key>
</Animation>
<PointLight diffuse="#FF0000"></PointLight>
<Entity v-for="(position, key) in boxes" :key="key" :position="position">
<Animation property="rotation.x" :duration="duration">
<Key frame="0%" :value="0"></Key>
<Key frame="25%" :value="Math.PI * getRandom(0.25, 0.75) * getRandomInt(-1, 1)"></Key>
<Key frame="50%" :value="Math.PI * getRandom(0.75, 1.25) * getRandomInt(-1, 1)"></Key>
<Key frame="75%" :value="Math.PI * getRandom(1.25, 1.75) * getRandomInt(-1, 1)"></Key>
<Key frame="100%" :value="Math.PI * 2"></Key>
</Animation>
<Animation property="rotation.y" :duration="duration">
<Key frame="0%" :value="0"></Key>
<Key frame="25%" :value="Math.PI * getRandom(0.25, 0.75) * getRandomInt(-1, 1)"></Key>
<Key frame="50%" :value="Math.PI * getRandom(0.75, 1.25) * getRandomInt(-1, 1)"></Key>
<Key frame="75%" :value="Math.PI * getRandom(1.25, 1.75) * getRandomInt(-1, 1)"></Key>
<Key frame="100%" :value="Math.PI * 2"></Key>
</Animation>
<Animation property="rotation.z" :duration="duration">
<Key frame="0%" :value="0"></Key>
<Key frame="25%" :value="Math.PI * getRandom(0.25, 0.75) * getRandomInt(-1, 1)"></Key>
<Key frame="50%" :value="Math.PI * getRandom(0.75, 1.25) * getRandomInt(-1, 1)"></Key>
<Key frame="75%" :value="Math.PI * getRandom(1.25, 1.75) * getRandomInt(-1, 1)"></Key>
<Key frame="100%" :value="Math.PI * 2"></Key>
</Animation>
<Box></Box>
</Entity>
</Entity>
</Scene>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
var BOXES = [
[0, 0, 0],
[0, 0, 4],
[0, 0, -4],
[0, 4, 0],
[0, -4, 0],
[0, 4, 4],
[0, 4, -4],
[0, -4, 4],
[0, -4, -4],
[4, 0, 0],
[-4, 0, 0],
[4, 0, 4],
[4, 0, -4],
[-4, 0, 4],
[-4, 0, -4],
[4, 4, 0],
[4, -4, 0],
[-4, 4, 0],
[-4, -4, 0],
[4, 4, 4],
[4, 4, -4],
[4, -4, 4],
[4, -4, -4],
[-4, 4, 4],
[-4, 4, -4],
[-4, -4, 4],
[-4, -4, -4]];
Vue.use(window.VueBabylonjs);
const app = new Vue({
el: '#app',
data: function () {
const self = this;
return {
duration: self.getRandomInt(5, 25),
scene: null,
};
},
computed: {
boxes: function () {
return BOXES;
},
},
watch: {
scene: function () {
console.log('scene available');
}
},
methods: {
onClick: function (i) {
console.log(i - 1 + ': ' + BOXES[i - 1]);
},
getRandom: function (min, max) {
return Math.random() * (max - min) + min;
},
getRandomInt: function (min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
},
}
});
window.addEventListener("click", function () {
console.log('clicked');
// stop moving for a bit
app.$data.scene.stopAllAnimations();
// We try to pick an object
var pickResult = app.$data.scene.pick(scene.pointerX, scene.pointerY);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment