world_script.js

// Init position
var mousePos = { x: 0.5, y: 0.5 };
var phase = 0;

// Scroll to figure
document.addEventListener("mousemove", function (event) {
  mousePos = {
    x: event.clientX / window.innerWidth,
    y: event.clientY / window.innerHeight,
  };
});
// End

// Scene and camera
const existingCanvasElement = document.getElementById("world_canvas")

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  95,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 30;
// End

var renderer = new THREE.WebGLRenderer(existingCanvasElement);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener("resize", function () {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
});

// Geometry, Material and Size for particles
var size = 0.25;
var geometry = new THREE.CubeGeometry(size, size, size);
var material = new THREE.MeshBasicMaterial({
  transparent: true,
  color: 0x5DC9F5,
  opacity: 0.55,
  side: THREE.DoubleSide,
});
// End

// Particles per column and row
var y_axis = 70;
var x_axis = y_axis / 2;
var particles = y_axis * x_axis;
// End

// Explosion variation
var side = Math.pow(particles, 1 / 10);
var radius = 20;
// End

var parentContainer = new THREE.Object3D();
scene.add(parentContainer);

function posInBox(place) {
  return (place / side - 0.5) * radius;
}

// Plant the seeds, grow some trees in a grid!
for (let i = 0; i < y_axis; i++) {
  var step = (Math.PI * 2 * i) / y_axis;

  for (let j = 0; j < x_axis; j++) {
    var elevation = Math.PI * (j / x_axis - 0.5);
    var particle = new THREE.Mesh(geometry, material);

    parentContainer.add(particle);
    let dest = new THREE.Vector3();

    // Sphere calculations
    dest.z = Math.sin(step) * Math.cos(elevation) * radius; // z pos in sphere
    dest.x = Math.cos(step) * Math.cos(elevation) * radius; // x pos in sphere
    dest.y = Math.sin(elevation) * radius; // y pos in sphere
    // End

    // Calculations to explode
    particle.position.x = posInBox(parentContainer.children.length % side);
    particle.position.y = posInBox(
      Math.floor(parentContainer.children.length / side) % side
    );
    particle.position.z = posInBox(
      Math.floor(parentContainer.children.length / Math.pow(side, 2)) % side
    );
    // End

    particle.userData = {
      dests: [dest, particle.position.clone()],
      speed: new THREE.Vector3(),
    };
  }
}
// End

function render() {
  // Speed to rotate
  phase += 0.00065;

  for (let i = 0, l = parentContainer.children.length; i < l; i++) {
    let particle = parentContainer.children[i];

    let dest = particle.userData.dests[
      Math.floor(phase) % particle.userData.dests.length
    ].clone();

    let diff = dest.sub(particle.position);
    particle.userData.speed.divideScalar(1.02); // Some drag on the speed
    particle.userData.speed.add(diff.divideScalar(600)); // Modify speed by a fraction of the distance to the dest
    particle.position.add(particle.userData.speed);
    particle.lookAt(dest);
  }

  parentContainer.rotation.y = phase * 3;
  parentContainer.rotation.x = (mousePos.y - 0.5) * Math.PI;
  parentContainer.rotation.z = (mousePos.x - 0.5) * Math.PI;

  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

render();