cliffdr / space-travel

A WebGL space travel experience

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();