diff --git a/src/open.js b/src/open.js index 39f8f0f..5b2e694 100644 --- a/src/open.js +++ b/src/open.js @@ -4,6 +4,7 @@ const STAR_POINTS = 5; let scene, camera, renderer; let coreStarGroup; +let rings = []; let animation = { steps: 0, x: new Float32Array(4), @@ -11,13 +12,18 @@ let animation = { z: new Float32Array(4), }; +/** + * Implementation of exponential multi-stage interpolation. + * + * @param range something array-like filled with numbers + * @param factor exponential factor for interpolation. + */ function interpolate(range, factor) { for (let i = 1; i < range.length; ++i) { range[i] += (range[i - 1] - range[i]) * factor; } } - /** * Create a BufferGeometry from vertices and faces. * @@ -67,6 +73,15 @@ function addStar() { let ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.receiveShadow = ring.castShadow = true; coreStarGroup.add(ring); + + for (let i = 0; i < 2; ++i) { + let outer = 5 + 2 * i; + let inner = 3.5 + 1.5 * i; + let ring = new THREE.Mesh(generateStarRing(inner, outer, 0.4), ringMaterial); + ring.castShadow = ring.receiveShadow = true; + scene.add(ring); + rings.push(ring); + } } /** @@ -97,6 +112,8 @@ function generateStarRing(innerRadius, outerRadius, size) { starCoordinates(innerRadius - 0.5 * size, outerRadius - 0.5 * size, 0.5 * size), starCoordinates(innerRadius - 0.5 * size, outerRadius - 0.5 * size, -0.5 * size), ]; + + // TODO: remove duplicate vertices. let vertices = concatFloat32Array( vertexCandidates[0], vertexCandidates[1], @@ -107,7 +124,6 @@ function generateStarRing(innerRadius, outerRadius, size) { vertexCandidates[3], vertexCandidates[0], ); - console.log(vertices); const faces = new Array(2 * STAR_POINTS * 3 * 4); for (let i = 0; i < 4; ++i) { @@ -124,8 +140,8 @@ function generateStarRing(innerRadius, outerRadius, size) { function startOpenAnimation() { scene = new THREE.Scene(); - camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); - camera.position.z = 5; + camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); + camera.position.z = 10; renderer = new THREE.WebGLRenderer({ antialias: true, @@ -263,6 +279,11 @@ function animate() { coreStarGroup.rotation.y = animation.y.last(); coreStarGroup.rotation.z = animation.z.last(); + for (let i = 0; i < rings.length; ++i) { + let sign = 2 * (i % 2) - 1; + rings[i].rotation.y += sign * 0.05; + } + renderer.render(scene, camera); }