var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  100
);

camera.position.z = 5;

var renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});

renderer.setSize(
  window.innerWidth,
  window.innerHeight
);

renderer.setPixelRatio(
  Math.min(window.devicePixelRatio, 2)
);

document
  .getElementById("orb")
  .appendChild(renderer.domElement);

// ===============================
// PARTICLE SPHERE
// ===============================

var count = 2200;

var positions =
  new Float32Array(count * 3);

var originalPositions =
  new Float32Array(count * 3);

for (var i = 0; i < count; i++) {

var phi =
    Math.acos(
      2 * Math.random() - 1
    );

var theta =
    Math.random() *
    Math.PI *
    2;

var radius =
    1.7 +
    Math.random() * 0.18;

var x =
    radius *
    Math.sin(phi) *
    Math.cos(theta);

var y =
    radius *
    Math.sin(phi) *
    Math.sin(theta);

var z =
    radius *
    Math.cos(phi);

positions[i * 3] = x;
  positions[i * 3 + 1] = y;
  positions[i * 3 + 2] = z;

originalPositions[i * 3] = x;
  originalPositions[i * 3 + 1] = y;
  originalPositions[i * 3 + 2] = z;
}

var geometry =
  new THREE.BufferGeometry();

geometry.setAttribute(
  "position",
  new THREE.BufferAttribute(
    positions,
    3
  )
);

var material =
  new THREE.PointsMaterial({
    color: 0x55ccff,
    size: 0.025,
    transparent: true,
    opacity: 0.9,
    blending: THREE.AdditiveBlending
  });

var sphere =
  new THREE.Points(
    geometry,
    material
  );

scene.add(sphere);

// ===============================
// INNER GLOW
// ===============================

var glowGeometry =
  new THREE.SphereGeometry(
    1.2,
    32,
    32
  );

var glowMaterial =
  new THREE.MeshBasicMaterial({
    color: 0x2244ff,
    transparent: true,
    opacity: 0.08
  });

var glow =
  new THREE.Mesh(
    glowGeometry,
    glowMaterial
  );

scene.add(glow);

// ===============================
// ORBIT RINGS
// ===============================

var ringMaterial =
  new THREE.MeshBasicMaterial({
    color: 0xaa55ff,
    transparent: true,
    opacity: 0.25,
    side: THREE.DoubleSide
  });

for (var r = 0; r < 3; r++) {

var ringGeometry =
    new THREE.TorusGeometry(
      2.15 + r * 0.18,
      0.006,
      8,
      160
    );

var ring =
    new THREE.Mesh(
      ringGeometry,
      ringMaterial
    );

ring.rotation.x =
    Math.random() * Math.PI;

ring.rotation.y =
    Math.random() * Math.PI;

sphere.add(ring);
}

// ===============================
// MOUSE
// ===============================

var mouseX = 0;
var mouseY = 0;

window.addEventListener(
  "mousemove",
  function(event) {

mouseX =
      event.clientX /
      window.innerWidth -
      0.5;

mouseY =
      event.clientY /
      window.innerHeight -
      0.5;
  }
);

// ===============================
// ANIMATION
// ===============================

var clock =
  new THREE.Clock();

function animate() {

requestAnimationFrame(animate);

var time =
    clock.getElapsedTime();

sphere.rotation.y += 0.0025;
  sphere.rotation.x += 0.0008;

// Mouse movement

sphere.rotation.y +=
    (
      mouseX * 0.35 -
      sphere.rotation.y * 0.02
    ) * 0.002;

sphere.rotation.x +=
    mouseY * 0.0007;

// Breathing / energy pulse

var scale =
    1 +
    Math.sin(time * 2) * 0.04;

sphere.scale.set(
    scale,
    scale,
    scale
  );

glow.scale.setScalar(
    1 +
    Math.sin(time * 2) * 0.08
  );

// Slightly distort particles

var pos =
    geometry.attributes.position.array;

for (
    var i = 0;
    i < count;
    i++
  ) {

var index = i * 3;

var ox =
      originalPositions[index];

var oy =
      originalPositions[index + 1];

var oz =
      originalPositions[index + 2];

var wave =
      Math.sin(
        time * 2 +
        oy * 3 +
        ox * 2
      ) * 0.025;

pos[index] =
      ox * (1 + wave);

pos[index + 1] =
      oy * (1 + wave);

pos[index + 2] =
      oz * (1 + wave);
  }

geometry.attributes.position.needsUpdate =
    true;

// Slowly shift hue

material.color.setHSL(
    0.52 +
    Math.sin(time * 0.35) * 0.08,
    0.9,
    0.65
  );

renderer.render(
    scene,
    camera
  );
}

animate();

// ===============================
// RESIZE
// ===============================

window.addEventListener(
  "resize",
  function() {

camera.aspect =
      window.innerWidth /
      window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(
      window.innerWidth,
      window.innerHeight
    );
  }
);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground