diff --git a/src/components/twister.js b/src/components/twister.js new file mode 100644 index 0000000..2e35e48 --- /dev/null +++ b/src/components/twister.js @@ -0,0 +1,70 @@ +AFRAME.registerComponent('twister', { + schema: { + twist: {default: 0}, + vertices: {default: 4, type: 'int'}, + count: {default: 20, type: 'int'}, + positionIncrement: {default: 2}, + radiusIncrement: {default: 0.5}, + thickness: {default: 0.4} + }, + + init: function () { + this.currentTwist = 0; + this.animate = false; + }, + + update: function (oldData) { + var radius = 4; + var segment; + var lastSegment; + + if (Math.abs(this.data.twist - this.currentTwist) > 0.001){ + this.animate = true; + } + + this.clearSegments(); + lastSegment = this.el.object3D; + + for (var i = 0; i < this.data.count; i++) { + segment = this.createSegment(radius); + segment.position.y = this.data.positionIncrement; + lastSegment.add(segment); + lastSegment = segment; + radius += this.data.radiusIncrement; + } + }, + + createSegment: function (radius) { + const R = this.data.thickness; + var points = [ + new THREE.Vector2(radius - R, R), + new THREE.Vector2(radius - R, -R), + new THREE.Vector2(radius + R, -R), + 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; + }, + + clearSegments: function () { + this.el.object3D.remove(this.el.object3D.children[0]); + }, + + tick: function (time, delta) { + if (!this.animate) { return; } + if (Math.abs(this.data.twist - this.currentTwist) < 0.001){ + this.animate = false; + } + + this.currentTwist += (this.data.twist - this.currentTwist) * delta * 0.001; + + var child = this.el.object3D.children[0]; + while (child) { + child.rotation.y = this.currentTwist; + child = child.children[0]; + } + } +});