Xpell-3D Example

DynaSphere Audio Visualizator

Audio-reactive 3D sphere driven by Xpell-3D primitives and Wormholes streaming waveform data. Explore the source, see the render, and open the live demo.

← Back
DynaSphere screenshot
Code excerpt
// render loop
import { Xpell as _x, X3D, XData as _xd } from "xpell-3d";

_x.start();
_x.loadModule(X3D);

const scene = X3D.add({
  _type: "scene",
  _children: [
    { _type: "camera", _id: "cam", position: [0, 0, 6] },
    { _type: "ambientLight", intensity: 0.2 },
    { _type: "pointLight", intensity: 2, position: [3, 3, 3] },
    {
      _type: "mesh",
      geometry: { _type: "sphereGeometry", args: [1.5, 64, 64] },
      material: { _type: "meshStandardMaterial", color: "#4c7fff", metalness: 0.25 },
      _on_frame: (xobj, frame) => {
        const amp = _xd._o["audio-amp"] || 0;
        xobj.scale.setScalar(1 + amp * 0.8);
        xobj.rotation.y += 0.01;
      },
    },
  ],
});

// audio data pushed by Wormholes into _xd._o["audio-amp"]