Implement a simple star.
This commit is contained in:
43
src/open.js
43
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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user