Implement a simple star.

This commit is contained in:
2019-03-08 17:08:20 +01:00
parent f5344f3197
commit 51b26ff498

View File

@@ -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);
}