1.1.0 • Published 1 year ago

space-travel v1.1.0

Weekly downloads
-
License
The Unlicense
Repository
github
Last release
1 year ago

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

namevaluedescription
parameters.canvasrequiredHTML canvas to be rendered
parameters.throttleoptionnal default : 0Number between 0 and 1. Initial speed with relative increasing intensity.
parameters.throttleLerpFactoroptionnal default : 0.035Number defining an acceleration factor to reach a new throttle value
parameters.opacityoptionnal default : 1Number between 0 and 1. Initial global opacity.
parameters.opacityLerpFactoroptionnal default : 0.016Number between 0 and 1. Number defining an acceleration factor to reach a new opacity value.
parameters.startOpacityoptionnal default : 0Number between 0 and 1. Global opacity on scene creation before reaching parameters.opacity.
parameters.backgroundColoroptionnal default : 0x08000fColor (hex number or css string value) filling the canvas background
parameters.starfieldoptionnalstarfield parameters (see below)
parameters.nebulaeoptionnalnebulae parameters (see below)

starfield parameters

namevaluedescription
starfield.countoptionnal default : 1500Number of stars in the scene
starfield.containeroptionnal default : { length: 40, depth: 40 }Object defining length and depth of the box containing the stars
starfield.colorRangeoptionnal default : { min: 0x3068ff, max: 0xf34f94 }Object defining minimum and maximum star random colors (hex number or css string value)
starfield.thicknessRangeoptionnal default : { min: 0.035, max: 0.06 }Object defining minimum and maximum star thickness related to throttle value
starfield.rayLengthRangeoptionnal default : { min: 0.1, max: 2.5 }Object defining minimum and maximum star ray length related to throttle value
starfield.stretchFactorRangeoptionnal default : { min: 0, max: 1.5 }Object defining minimum and maximum star stretch factor related to throttle value
starfield.shakeSpeedFactoroptionnal default : 0.001Number defining the camera random offset related to throttle value
starfield.shakeStrengthFactoroptionnal default : 0.0035Number defining the intensity of the shaking
starfield.speedRangeoptionnal default : { min: 0.5, max: 60 }Object defining minimum and maximum speed of the stars related to throttle value
starfield.particleTextureUrloptionnal default : "https://webgl-space-travel.requin.pro/particle-sprite.png"Url of the particle texture image
starfield.noiseTextureUrloptionnal default : "https://webgl-space-travel.requin.pro/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.requin.pro/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.requin.pro/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.requin.pro/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

namevaluedescription
nebula.coneModelUrloptionnal default : "https://webgl-space-travel.requin.pro/cone.glb"Url of the object that defines the shape of the nebula
nebula.textureUrloptionnal default : nullTexture image url
nebula.colorRangeoptionnal default : { min: 0xff0000, max: 0x0000ff }Object defining minimum and maximum nebula color related to throttle value
nebula.opacityRangeoptionnal default : { min: 0.5, max: 1 }Object defining minimum and maximum nebula opacity related to throttle value
nebula.repeatOffsetRangeoptionnal default : { min: [1, 1], max: [0.15, 1] }Object defining minimum and maximum texture offset related to throttle value
nebula.fallOffDistanceoptionnal default : -8Number defining a maximum visibility depth distance for the texture
nebula.speedRangeoptionnal default : { min: 0.0025, max: 0.525 }Object defining minimum and maximum texture speed depth scrolling related to throttle value
nebula.rotationSpeedRangeoptionnal 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();
1.1.0

1 year ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.0

4 years ago