bert/isdefoobaropen
1
0
Fork 0
Code Pull Requests Releases Activity

Make animation more exciting.

Browse Source
This commit is contained in:
Bert Peters
2019-03-14 15:52:05 +01:00
parent 5b851b83d9
commit b13b38477a
1 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/open.js
View File

@@ -4,6 +4,7 @@ const STAR_POINTS = 5;
let scene, camera, renderer; let scene, camera, renderer;
let coreStarGroup; let coreStarGroup;
let rings = [];
let animation = { let animation = {
steps: 0, steps: 0,
x: new Float32Array(4), x: new Float32Array(4),
@@ -11,13 +12,18 @@ let animation = {
z: new Float32Array(4), 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) { function interpolate(range, factor) {
for (let i = 1; i < range.length; ++i) { for (let i = 1; i < range.length; ++i) {
range[i] += (range[i - 1] - range[i]) * factor; range[i] += (range[i - 1] - range[i]) * factor;
} }
} }
/** /**
* Create a BufferGeometry from vertices and faces. * Create a BufferGeometry from vertices and faces.
* *
@@ -67,6 +73,15 @@ function addStar() {
let ring = new THREE.Mesh(ringGeometry, ringMaterial); let ring = new THREE.Mesh(ringGeometry, ringMaterial);
ring.receiveShadow = ring.castShadow = true; ring.receiveShadow = ring.castShadow = true;
coreStarGroup.add(ring); 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),
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( let vertices = concatFloat32Array(
vertexCandidates[0], vertexCandidates[0],
vertexCandidates[1], vertexCandidates[1],
@@ -107,7 +124,6 @@ function generateStarRing(innerRadius, outerRadius, size) {
vertexCandidates[3], vertexCandidates[3],
vertexCandidates[0], vertexCandidates[0],
); );
console.log(vertices);
const faces = new Array(2 * STAR_POINTS * 3 * 4); const faces = new Array(2 * STAR_POINTS * 3 * 4);
for (let i = 0; i < 4; ++i) { for (let i = 0; i < 4; ++i) {
@@ -124,8 +140,8 @@ function generateStarRing(innerRadius, outerRadius, size) {
function startOpenAnimation() { function startOpenAnimation() {
scene = new THREE.Scene(); scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; camera.position.z = 10;
renderer = new THREE.WebGLRenderer({ renderer = new THREE.WebGLRenderer({
antialias: true, antialias: true,
@@ -263,6 +279,11 @@ function animate() {
coreStarGroup.rotation.y = animation.y.last(); coreStarGroup.rotation.y = animation.y.last();
coreStarGroup.rotation.z = animation.z.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); renderer.render(scene, camera);
} }