Why use it?

It's can build full page webgl easily. include camera light orbitControls sky sun.

Live Demo

Installation

npm install lesca-webgl-threejs --save

Usage

import Webgl from 'lesca-webgl-threejs';
import { CameraType } from 'lesca-webgl-threejs/types';

const config = {
  fps: 0,
  camera: { zoom: 30, far: 75, type: CameraType.perspective, dom: undefined },
  sky: {
    enabled: true,
    turbidity: 3.8,
    rayleigh: 2.967,
    mieCoefficient: 0.005,
    mieDirectionalG: 0.7,
    inclination: 70,
    azimuth: 180,
  },
  controls: {
    distance: { min: 13, max: 30 },
    polar: { min: -70, max: 70 },
    azimuth: { min: -Infinity, max: Infinity },
    default: {
      polar: 0,
      azimuth: 0,
    },
    offsetAzimuth: 0,
    enabled: true,
    panEasing: 100,
  },
  light: {
    ambient: {
      color: 0x5289d2,
      intensity: 0.6,
    },
    point: {
      enabled: true,
      color: 0x999999,
      intensity: 0.9,
      distance: 3,
      decay: 0.5,
      position: { x: 0, y: 3, z: 10 },
    },
    spot: {
      enabled: false,
      color: 0x999999,
      intensity: 0.9,
      distance: 3,
      decay: 0.5,
      angle: Math.PI * 0.12,
      penumbra: 1,
      position: { x: 0, y: 3, z: 0 },
    },
    shadowMapSize: 256,
    debug: true,
  },
  renderer: {
    alpha: false,
    shadowType: THREE.PCFSoftShadowMap,
    exposure: 0.5,
    outputEncoding: THREE.sRGBEncoding,
  },
  physics: false,
  stats: true,
};

const webgl = new Webgl(config);
container.appendChild(render.domElement);

Development

Config

Default camera config

Default sky config

Default controls config

Methods of controls

Default light config

ambient

• color: 0x5289d2
• intensity: 0.6

spot

• color: 0x999999
• intensity: 0.9
• position: { x: 0, y: 15, z: 0 }
• distance: 3
• decay: 0.5
• angle: Math.PI * 0.12
• penumbra: 1

point

• color: 0x999999
• intensity: 0.9
• distance: 3
• position: { x: 0, y: 15, z: 0 }
• decay: 0.5

Default renderer config

Default physics config

Default stats config

Features

• Code Linting (eslint)
• maintain if necessary