Sprites.Ui.Scene

Three dimensional scene surfaces for the interface. A surface holds a camera, puts it into context, and draws on a Sprites.Ui.Image surface underneath, so the Sprites.Scene commands project their points onto a plain image. Vector draws on an SVG; Bitmap, a WebGL surface, is planned.

Sprites.Ui.Scene

Sprites.Ui.Scene.Vector Element

Sprites.Ui.Scene.Vector(build)

An SVG scene surface that fills its container. It builds a Sprites.Ui.Image Vector centred on the origin, creates a camera and puts it in context, and runs the build with the Sprites.Scene commands, which project their three dimensional points onto the image. The origin sits in the centre of the frame, marked by a faint cross. Place a Sprites.Scene.RotateAndZoom inside to orbit and zoom the camera by dragging.

InputTypeDescription
buildFunctionBuilds the scene with Sprites.Scene commands.

Returns the svg element.

Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Class('image-frame');
  Sprites.Ui.Dom.Style('width', '100%');
  Sprites.Ui.Dom.Style('height', '220px');
  Sprites.Ui.Scene.Vector(() => {
    Sprites.Scene.RotateAndZoom();
    Sprites.Scene.LineStyle(0.02, '#0f172a', () => {
      Sprites.Scene.FillStyle('#38bdf8', () => {
        Sprites.Scene.Translate(0, 0, 1, () => { Sprites.Scene.Square(-1, -1, 1, 1); });
        Sprites.Scene.Translate(0, 0, -1, () => { Sprites.Scene.RotateY(Math.PI, () => { Sprites.Scene.Square(-1, -1, 1, 1); }); });
        Sprites.Scene.Translate(1, 0, 0, () => { Sprites.Scene.RotateY(Math.PI / 2, () => { Sprites.Scene.Square(-1, -1, 1, 1); }); });
        Sprites.Scene.Translate(-1, 0, 0, () => { Sprites.Scene.RotateY(-Math.PI / 2, () => { Sprites.Scene.Square(-1, -1, 1, 1); }); });
        Sprites.Scene.Translate(0, 1, 0, () => { Sprites.Scene.RotateX(-Math.PI / 2, () => { Sprites.Scene.Square(-1, -1, 1, 1); }); });
        Sprites.Scene.Translate(0, -1, 0, () => { Sprites.Scene.RotateX(Math.PI / 2, () => { Sprites.Scene.Square(-1, -1, 1, 1); }); });
      });
    });
  });
});
A solid cube of six square faces. Drag to orbit the camera and use the wheel to zoom. Faces turned away from you are culled, so you only ever see the near three.

Sprites.Ui.Scene.Bitmap Planned

Sprites.Ui.Scene.Bitmap(width, height, build)

A WebGL scene surface, planned. It will match Vector's context, so the same scene draws on either. It is not built yet; calling it throws, pointing you at Sprites.Ui.Scene.Vector.

InputTypeDescription
widthNumberThe surface width in pixels.
heightNumberThe surface height in pixels.
buildFunctionBuilds the scene with Sprites.Scene commands.

Returns nothing yet.