/space-travel

A WebGL space travel experience

Primary LanguageTypeScriptThe UnlicenseUnlicense

Space Travel

demo

WebGL space scene with lightspeed warp effect.

Strongly inspired by https://nova.app/. Entirely rewritten in typescript.

Use three.js JavaScript 3D library under the hood.

Usage

Script

<canvas id="space-travel"></canvas>
<script type="module">
  import SpaceTravel from "https://unpkg.com/space-travel?module";
  new SpaceTravel({ canvas: document.getElementById("space-travel") }).start();
</script>

Module

$ npm install space-travel

From your application js file :

import SpaceTravel from "space-travel";
new SpaceTravel({ canvas: document.getElementById("space-travel") }).start();

Interactions

You can bind DOM events to interact with instance state (throttle, opacity) or call methods (pause(), resume(), resize()). See src/main.ts as an example.

Documentation

class SpaceTravel

constructor

const scene = new SpaceTravel(parameters);

parameters

name value description
parameters.canvas required HTML canvas to be rendered
parameters.throttle optionnal default : 0 Number between 0 and 1. Initial speed with relative increasing intensity.
parameters.throttleLerpFactor optionnal default : 0.035 Number defining an acceleration factor to reach a new throttle value
parameters.opacity optionnal default : 1 Number between 0 and 1. Initial global opacity.
parameters.opacityLerpFactor optionnal default : 0.016 Number between 0 and 1. Number defining an acceleration factor to reach a new opacity value.
parameters.startOpacity optionnal default : 0 Number between 0 and 1. Global opacity on scene creation before reaching parameters.opacity.
parameters.backgroundColor optionnal default : 0x08000f Color (hex number or css string value) filling the canvas background
parameters.starfield optionnal starfield parameters (see below)
parameters.nebulae optionnal nebulae parameters (see below)

starfield parameters

name value description
starfield.count optionnal default : 1500 Number of stars in the scene
starfield.container optionnal default : { length: 40, depth: 40 } Object defining length and depth of the box containing the stars
starfield.colorRange optionnal default : { min: 0x3068ff, max: 0xf34f94 } Object defining minimum and maximum star random colors (hex number or css string value)
starfield.thicknessRange optionnal default : { min: 0.035, max: 0.06 } Object defining minimum and maximum star thickness related to throttle value
starfield.rayLengthRange optionnal default : { min: 0.1, max: 2.5 } Object defining minimum and maximum star ray length related to throttle value
starfield.stretchFactorRange optionnal default : { min: 0, max: 1.5 } Object defining minimum and maximum star stretch factor related to throttle value
starfield.shakeSpeedFactor optionnal default : 0.001 Number defining the camera random offset related to throttle value
starfield.shakeStrengthFactor optionnal default : 0.0035 Number defining the intensity of the shaking
starfield.speedRange optionnal default : { min: 0.5, max: 60 } Object defining minimum and maximum speed of the stars related to throttle value
starfield.particleTextureUrl optionnal default : "https://webgl-space-travel.netlify.app/particle-sprite.png" Url of the particle texture image
starfield.noiseTextureUrl optionnal default : "https://webgl-space-travel.netlify.app/noise.jpg" Url of the noise image used to generate the shaking effect

nebulae parameters

Array of nebula parameters (see below)

Default value :

[
  {
    textureUrl: "https://webgl-space-travel.netlify.app/clouds1.jpg",
    colorRange: { min: 0xff0042, max: 0xff0042 },
    opacityRange: { min: 0.05, max: 0.2 },
    speedRange: { min: 0.0025, max: 0.175 },
    repeatOffsetRange: { min: [1, 1], max: [0.33, 1] },
    fallOffDistance: -8,
    rotationSpeedRange: { min: 1, max: 30 }
  },
  {
    textureUrl: "https://webgl-space-travel.netlify.app/noise3.jpg",
    colorRange: { min: 0x2659fd, max: 0x2659fd },
    opacityRange: { min: 0.05, max: 0.25 },
    speedRange: { min: 0.003, max: 0.075 },
    repeatOffsetRange: { min: [0.5, 1], max: [0.25, 1] },
    fallOffDistance: -6,
    rotationSpeedRange: { min: 0.5, max: 25 }
  },
  {
    textureUrl: "https://webgl-space-travel.netlify.app/noise3.jpg",
    colorRange: { min: 0x8500ef, max: 0x8500ef },
    opacityRange: { min: 0.02, max: 0.25 },
    speedRange: { min: 0.002, max: 0.1125 },
    repeatOffsetRange: { min: [0.75, 1], max: [0.35, 1] },
    fallOffDistance: -6,
    rotationSpeedRange: { min: 1.09, max: 31 }
  }
];

nebula parameters

name value description
nebula.coneModelUrl optionnal default : "https://webgl-space-travel.netlify.app/cone.glb" Url of the object that defines the shape of the nebula
nebula.textureUrl optionnal default : null Texture image url
nebula.colorRange optionnal default : { min: 0xff0000, max: 0x0000ff } Object defining minimum and maximum nebula color related to throttle value
nebula.opacityRange optionnal default : { min: 0.5, max: 1 } Object defining minimum and maximum nebula opacity related to throttle value
nebula.repeatOffsetRange optionnal default : { min: [1, 1], max: [0.15, 1] } Object defining minimum and maximum texture offset related to throttle value
nebula.fallOffDistance optionnal default : -8 Number defining a maximum visibility depth distance for the texture
nebula.speedRange optionnal default : { min: 0.0025, max: 0.525 } Object defining minimum and maximum texture speed depth scrolling related to throttle value
nebula.rotationSpeedRange optionnal default : { min: 1, max: 45 } Object defining minimum and maximum texture rotation speed (in deg/s) related to throttle value

properties

  • throttle

Get or set a new throttle target value.

scene.throttle = Math.min(1, scene.throttle + 0.1);
  • opacity

Get or set a new opacity target value.

scene.opacity = 0.5;

methods

  • start()

Puts the scene into action.

scene.start();
  • resume()

Alias of start() method.

scene.resume();
  • pause()

Freeze the scene.

scene.pause();
  • resize()

Automatically resize the scene to fit the canvas current size.

scene.resize();