diff --git a/src/open.js b/src/open.js index 778da2c..9669f54 100644 --- a/src/open.js +++ b/src/open.js @@ -2,6 +2,8 @@ import * as THREE from "three"; import './open.scss'; +const STAR_POINTS = 5; + let scene, camera, renderer; let star; @@ -15,15 +17,44 @@ function startOpenAnimation() { document.body.appendChild(renderer.domElement); let geometry = new THREE.BufferGeometry(); - let vertices = starCoordinates(2/3, 1, 0); + let vertices = starCoordinates(2 / 3, 1, 0); geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); - let material = new THREE.LineBasicMaterial({color: 0x00ff00}); - star = new THREE.Line(geometry, material); + geometry.setIndex(filledStarIndices()); + let material = new THREE.MeshBasicMaterial({color: 0x00ff00}); + material.side = THREE.DoubleSide; + star = new THREE.Mesh(geometry, material); scene.add(star); requestAnimationFrame(animate) } +/** + * Construct the vertex indices needed to create a filled star. + * @returns {Number[]} + */ +function filledStarIndices() { + const buf = Array(2 * STAR_POINTS * 3); + const TOTAL_VERTICES = 2 * STAR_POINTS; + + // First, the "points" of the star. + for (let i = 0; i < STAR_POINTS; ++i) { + const offset = 3 * i; + buf[offset] = 2 * i; + buf[offset + 1] = 2 * i + 1; + buf[offset + 2] = (2 * i + TOTAL_VERTICES - 1) % (TOTAL_VERTICES); + } + + // Then, the inner part, constructed from opposing triangles. + for (let i = 0; i < STAR_POINTS; ++i) { + const offset = 3 * (STAR_POINTS + i); + buf[offset] = 2 * i + 1; + buf[offset + 1] = (2 * i + 3) % TOTAL_VERTICES; + buf[offset + 2] = (2 * i + 3 + 2 * Math.floor(STAR_POINTS / 2)) % (TOTAL_VERTICES); + } + + return buf; +} + /** * Generate the outer points of an N pointed star. * @@ -33,12 +64,11 @@ function startOpenAnimation() { * @returns {Float32Array} */ function starCoordinates(innerRadius, outerRadius, z) { - const STAR_POINTS = 5; const buf = new Float32Array(3 * STAR_POINTS * 2); const STAR_SLICE = 2 * Math.PI / STAR_POINTS; for (let i = 0; i < STAR_POINTS; ++i) { - const offset = 3 * 2 * i ; + const offset = 3 * 2 * i; buf[offset + 0] = Math.sin(STAR_SLICE * i) * outerRadius; buf[offset + 1] = Math.cos(STAR_SLICE * i) * outerRadius; buf[offset + 3] = Math.sin(STAR_SLICE * (i + 0.5)) * innerRadius; @@ -53,6 +83,7 @@ function animate() { requestAnimationFrame(animate); star.rotation.z += 0.01; + star.rotation.y += 0.01; renderer.render(scene, camera); }