Portals and spell orbs

#Portals

const portal = magic.addEffect('portal', {
  position: [0, 2.25, 0],
  axis: [0, 0, 1],                // the portal's normal
  colors: ['#a66bff', '#35d4ff'], // outer ring, inner ring
});
portal.retarget({ target: camera.position });   // turn it to face the camera

A portal adds four things to each frame:

1. An outer torus emitter of radius 1.12 m and tube thickness 0.2 m in colors[0]. Its glow pulses by ±pulse (25 %) at pulseRate 2.2 rad/s.
2. An inner torus emitter of innerRadius 0.62 m in colors[1]. Its radius wobbles by innerWobble 0.08 m.
3. A swirl field around the axis. Inside swirl.radius it drives the fluid toward a velocity that spins at speed, pulls toward the axis at pull and lifts along it at lift.
4. Rim sparks that spawn on a circle of sparks.ringRadius 1.15 m and are attracted to the centre at sparks.attract 1.8 m/s, so they spiral into the eye.

Neither emitter pushes the fluid (velocity zero, blend 0). All the motion comes from the swirl.

#Options

The colors getter returns the colours in effect this frame, with any setColor() override applied. The demo uses it to tint the rune ring.

#Recipes

// a calm, wide gate: slower spin, less pull, no pulse
portal.set({ radius: 1.4, pulse: 0, swirl: { speed: 1.6, pull: 0.6 } });

// a floor portal: lie it flat and let it lift smoke upward through the eye
portal.move([0, 0.4, 0]).retarget([0, 1, 0]).set({ swirl: { lift: 1.2 } });

// open it over five seconds (the clip on the Overview page)
magic.clear();
let opened = 0;
function openPortal(dt) {                     // call every frame before magic.update(dt)
  const k = Math.min(1, (opened += dt) / 5);
  portal.setIntensity(k * k * (3 - 2 * k));
}

#Spell orbs

const orbs = magic.addEffect('spellOrb', {
  position: [0, 2.0, 0],     // orbit centre
  count: 3,
  colors: ['#a66bff', '#35d4ff', '#ffc44a'],
});
orbs.orbs[0].position;       // live world position of each orb

Each orb is an emitter that moves along its orbit. It also gets:

• a point light (light.intensity 28, scaled by the glow control and the effect's intensity), so the orbs light the floor and props as they pass. Set light: { intensity: 0 } to add no lights.
• a bright core sphere of visual.size 0.075 m, drawn at three times the orb colour. Set visual: { size: 0 } for none.

The orbs' lights and meshes are ordinary three.js objects in your scene, named MagicOrbLight and MagicOrb. setLightsEnabled(false) hides the lights along with the glow light.

Lights offLights on

#Options