juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merged twister in one geometry

Browse Source
This commit is contained in:
Diego F. Goberna
2018-12-01 00:51:05 +01:00
committed by Diego Marcos
parent 8c98df87e2
commit cf31c24ebd
7 changed files with 59 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets.html
View File

@@ -25,6 +25,7 @@
<a-asset-item id="wrongObj" src="assets/models/wrong.obj"></a-asset-item>
<a-asset-item id="smokeObj" src="assets/models/smoke.obj"></a-asset-item>
<a-asset-item id="audiocolumnObj" src="assets/models/audiocolumn.obj"></a-asset-item>
<a-asset-item id="twisterObj" src="assets/models/twister.obj"></a-asset-item>
<a-asset-item id="tutorial1Obj" src="assets/models/tutorial1.obj"></a-asset-item>

11
src/components/stage-colors.js
View File

@@ -8,6 +8,7 @@ AFRAME.registerComponent('stage-colors', {
},
init: function () {
/*
this.neonRed = new THREE.Color(0xff9999);
this.neonBlue = new THREE.Color(0x9999ff);
this.defaultRed = new THREE.Color(0xff0000);
@@ -52,26 +53,31 @@ AFRAME.registerComponent('stage-colors', {
this.colorCodes = ['off', 'blue', 'blue', 'bluefade', '', 'red', 'red', 'redfade'];
this.el.addEventListener('cleargame', this.resetColors.bind(this));
*/
},
update: function (oldData) {
this.updateColors(this.data.color);
// this.updateColors(this.data.color);
},
setColor: function (target, code) {
const mesh = this.targets[target].getObject3D('mesh');
/* const mesh = this.targets[target].getObject3D('mesh');
if (mesh) { mesh.material.opacity = 1; }
this.targets[target].emit('color' + this.colorCodes[code], null, false);
*/
},
resetColors: function () {
/*
this.updateColors('blue');
for (let target in this.targets) {
this.targets[target].emit('colorblue', null, false);
}
*/
},
updateColors: function (color) {
/*
const red = color === 'red';
// Init or reset.
@@ -95,4 +101,5 @@ AFRAME.registerComponent('stage-colors', {
this.mineMaterial.envMap = this.mineEnvMap[red ? 'red' : 'blue'];
this.mineMaterial.needsUpdate = true;
}
*/
});

79
src/components/twister.js
View File

@@ -1,3 +1,5 @@
const NUM_VALUES_PER_SEGMENT = 75;
AFRAME.registerComponent('twister', {
schema: {
enabled: {default: false},
@@ -12,47 +14,44 @@ AFRAME.registerComponent('twister', {
init: function () {
this.currentTwist = 0;
this.animate = false;
this.zoomProgress = 0;
this.geometry = null;
},
pulse: function (twist) {
if (!this.data.enabled) { return; }
console.log('PULSE');
if (twist == 0) { twist = 0.03 + Math.random() * 0.25; }
else twist = Math.min(twist * 0.4, 0.4);
twist *= Math.random() < 0.5 ? -1 : 1; // random direction
this.el.setAttribute('twister', {twist: twist});
},
zoom: function () {
if (!this.data.enabled) { return; }
this.zoomProgress = 0.01;
this.animate = true;
},
update: function (oldData) {
var radius = 6;
var segment;
var lastSegment;
var segments = [];
if (Math.abs(this.data.twist - this.currentTwist) > 0.001) {
this.animate = true;
return;
}
this.clearSegments();
lastSegment = this.el.object3D;
this.clear();
for (var i = 0; i < this.data.count; i++) {
segment = this.createSegment(radius);
segment.position.y = this.data.positionIncrement;
lastSegment.add(segment);
lastSegment = segment;
let segment = this.createSegment(radius);
segment.translate(0, this.data.positionIncrement * i, 0);
segments.push(segment);
radius += this.data.radiusIncrement;
}
this.geometry = THREE.BufferGeometryUtils.mergeBufferGeometries(segments);
var material = this.el.sceneEl.systems.materials.stageNormal;
var mesh = new THREE.Mesh(this.geometry, material);
this.el.object3D.add(mesh);
},
createSegment: function (radius) {
const R = this.data.thickness;
var geometry;
var points = [
new THREE.Vector2(radius - R, R),
new THREE.Vector2(radius - R, -R),
@@ -60,40 +59,50 @@ AFRAME.registerComponent('twister', {
new THREE.Vector2(radius + R, R),
new THREE.Vector2(radius - R, R)
];
var material = this.el.sceneEl.systems.materials.black;
var geometry = new THREE.LatheBufferGeometry(points, this.data.vertices);
var segment = new THREE.Mesh(geometry, material);
return segment;
geometry = new THREE.LatheBufferGeometry(points, this.data.vertices);
// move uvs to a specific point in atlas.png
for (let i = 0; i < geometry.attributes.uv.array.length; i += 2) {
geometry.attributes.uv.array[i] = 0.77;
geometry.attributes.uv.array[i + 1] = 0.001;
}
return geometry;
},
clearSegments: function () {
clear: function () {
this.el.object3D.remove(this.el.object3D.children[0]);
if (this.geometry) this.geometry.dispose();
this.geometry = new THREE.BufferGeometry();
},
tick: function (time, delta) {
if (!this.animate) { return; }
var posArray = this.geometry.attributes.position.array;
var rotation;
var x, y;
var sin, cos;
delta *= 0.001;
// TODO: FIX ROTATIONS!! (before they where absolute, now relative)
this.currentTwist += (this.data.twist - this.currentTwist) * delta;
rotation = 0.01;
var child = this.el.object3D.children[0];
var zoom = this.zoomProgress ? Math.sin(this.zoomProgress * Math.PI) * 0.4 : 0;
while (child) {
child.rotation.y = this.currentTwist;
child.position.y = this.data.positionIncrement + zoom;
child = child.children[0];
}
if (this.zoomProgress > 0) {
this.zoomProgress += delta;
if (this.zoomProgress >= 1) {
this.zoomProgress = 0;
for (var s = 0; s < this.data.count; s++) {
for (var i = 0; i < NUM_VALUES_PER_SEGMENT; i += 3) {
cos = Math.cos(rotation);
sin = Math.sin(rotation);
x = posArray[s * NUM_VALUES_PER_SEGMENT + i];
y = posArray[s * NUM_VALUES_PER_SEGMENT + i + 2];
posArray[s * NUM_VALUES_PER_SEGMENT + i] = x * cos - y * sin;
posArray[s * NUM_VALUES_PER_SEGMENT + i + 2] = y * cos + x * sin;
}
rotation *= 1.05;
}
if (Math.abs(this.data.twist - this.currentTwist) < 0.001 && this.zoomProgress == 0){
this.geometry.attributes.position.needsUpdate = true;
if (Math.abs(this.data.twist - this.currentTwist) < 0.001){
this.animate = false;
}
}
});

2
src/state/index.js
View File

@@ -64,7 +64,7 @@ AFRAME.registerState({
leaderboardQualified: false,
leaderboardNames: '',
leaderboardScores: '',
menuActive: false, // Main menu active.
menuActive: true, // Main menu active.
menuDifficulties: [], // List of strings of available difficulties for selected.
menuSelectedChallenge: { // Currently selected challenge in the main menu.
author: '',

7
src/templates/stage.html
View File

@@ -22,6 +22,7 @@
animation__colorbluefade="property: components.fog.el.object3D.fog.color; type: color; from: #3398CA; to: #007cb9; dur: 500; easing: linear; startEvents: colorbluefade"
animation__colorred="property: components.fog.el.object3D.fog.color; type: color; to: #b90000; dur: 5; easing: linear; startEvents: colorred"
animation__colorredfade="property: components.fog.el.object3D.fog.color; type: color; from: #ff0000; to: #b90000; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>
<!--
<a-sky
id="sky"
@@ -30,7 +31,7 @@
animation__gameover="property: components.material.material.color; type: color; to: #301000; startEvents: gameover"
geometry="segmentsHeight: 16; segmentsWidth: 32"
material="src: #skyTexture"></a-sky>
-->
<a-entity
id="audioAnalyser"
bind__audioanalyser="beatDetectionThrottle: menuActive && 5000 || 1000"
@@ -38,7 +39,7 @@
proxy-event="event: audioanalyserbeat; to: #logolight"></a-entity>
<a-entity id="stage">
<!--
<a-entity id="backglow"
visible="false"
mixin="gameoverAnimation bgAnimation"
@@ -47,7 +48,7 @@
material="transparent: true; color: #f00; src: #backglowTexture; opacity: 0.7"
position="0 0 -60"
scale="20 20 20"></a-entity>
-->
<a-entity id="twister" position="0 0 -35" rotation="90 0 0" bind__twister="enabled: isPlaying"></a-entity>
<a-entity