From 51b26ff498ad4e2d20f9e334f0b5e48e8c416972 Mon Sep 17 00:00:00 2001 From: Bert Peters Date: Fri, 8 Mar 2019 17:08:20 +0100 Subject: [PATCH] Implement a simple star. --- src/open.js | 43 +++++++++++++++++++++++++++++++++---------- 1 file changed, 33 insertions(+), 10 deletions(-) diff --git a/src/open.js b/src/open.js index 0302ab7..778da2c 100644 --- a/src/open.js +++ b/src/open.js @@ -3,7 +3,7 @@ import * as THREE from "three"; import './open.scss'; let scene, camera, renderer; -let cube; +let star; function startOpenAnimation() { scene = new THREE.Scene(); @@ -14,22 +14,45 @@ function startOpenAnimation() { renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); - - // Initialize sample cube. - let geometry = new THREE.BoxGeometry(1, 1, 1); - console.log(geometry); - let material = new THREE.MeshBasicMaterial({color: 0x00ff00}); - cube = new THREE.Mesh(geometry, material); - scene.add(cube); + let geometry = new THREE.BufferGeometry(); + 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); + scene.add(star); requestAnimationFrame(animate) } +/** + * Generate the outer points of an N pointed star. + * + * @param innerRadius + * @param outerRadius + * @param z + * @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 ; + 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; + buf[offset + 4] = Math.cos(STAR_SLICE * (i + 0.5)) * innerRadius; + buf[offset + 5] = buf[offset + 2] = z; + } + + return buf; +} + function animate() { requestAnimationFrame(animate); - cube.rotation.x += 0.01; - cube.rotation.y += 0.01; + star.rotation.z += 0.01; renderer.render(scene, camera); }