Energy orb material

<EnergyOrbMaterial> is the material of the plane it sits in, inside a World: a sphere of drifting smoke with a bright rim and a soft glow around it. Use it for a pickup, a power core or a boss’s weak point. It runs on the world’s clock, as every Shader does, so a paused game holds the smoke still.

Its props are in EnergyOrbMaterialProps.

The orb is drawn on a flat plane and reads as a sphere from the front. Stand the plane in drei’s <Billboard> so that it always faces the camera. The orb fills the middle 62% of the plane, and the glow fades out before the plane’s edge.

Roblox builds a glowing orb from a ball with the Neon or ForceField material. Unity, Unreal and Godot ship no orb; creators buy one from a store or copy one from godotshaders.com. This one is a single material with three props.

The shader is ThreeUI’s energy orb by Meng To, MIT, moved from the middle of a canvas onto a plane’s UVs. Its source is energyOrbFragment: copy it, change a block and pass it to a Shader for an orb of your own.

Sample

An orange orb floating over the meadow:

import { Billboard } from "@react-three/drei";
import { EnergyOrbMaterial, Entity, World } from "@daniel-zarinski/engine";

export function Core() {
    return (
        <World map="meadow">
            <Entity position={[0, 1.2, -3]}>
                <Billboard>
                    <mesh>
                        <planeGeometry args={[1.6, 1.6]} />
                        <EnergyOrbMaterial color="orange" />
                    </mesh>
                </Billboard>
            </Entity>
        </World>
    );
}

Where it runs

Client. The orb changes nothing in the world; each player’s browser draws its own. What touching it does is the game’s.