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

| method | description | default | | :--------------------- | :-------------------------: | --------------------------------------: | | .fps:number | set fps | 0 | | .camera:object | OrthographicCamera setup. | default | | .sky:object | Sky setup. | default | | .controls:object | orbitControls setup. | default | | .light:object | light setup. | default | | .renderer:object | webglRenderer setup. | default | | .physics:object | cannon-es setup. | default | | .stats:object | stats-js setup. | default |

Default camera config

| key | docs | default | | :--------------------- | :-------------------------: | ----------: | | zoom:number | zoom | 30 | | far:number | far | 200 | | dom:HTMLElement | HTML container | | | type:enum:number | orthographic or perspective | perspective |

Default sky config

| key | docs | default | | :--------------------------- | :---: | ------: | | enabled:boolean | | true | | turbidity:number | sky | 0 | | rayleigh:number | sky | 0.079 | | mieCoefficient:number | sky | 0.023 | | mieDirectionalG:number | sky | 0.226 | | inclination:number | sky | 70 | | azimuth:number | sky | -102.7 |

Default controls config

| key | docs | default | | :------------------------- | :-------------: | ----------------------------: | | enabled:boolean | orbitControls | true | | distance:object | orbitControls | min:30, max:30 | | polar:object | orbitControls | min:35, max:35 | | azimuth:object | orbitControls | min: -Infinity, max: Infinity | | default:object | orbitControls | polar:0, azimuth: 0 | | offsetAzimuth:number | number | 0 | | panEasing:number | number | 100 |

Methods of controls

| function Name | description | parameters | return | | :---------------------------------------------- | :--------------------------------: | :----------------------------------------------------------------------: | -----: | | .fixed(Object) | Fixed angle perspective | { polar:Number, azimuth:number, target: THREE.Vector3} | void | | .lookAt(vec:THREE.Vector3) | focus on a target point | vec:THREE.Vector3 | void | | .chase(mesh: THREE.Mesh, height:number) | camera will follow target smoothly | mesh:THREE.vector3 | void | | .lock() | lock camera | | void | | .unlock() | unlock camera | | void | | .set() | set angle and distance | { polar:Number, azimuth:number, distance: number} | void | | .get() | get angle and distance | { polar:Number, azimuth:number, distance: number} | void |

Default light config

| key | docs | default | | :------------------------- | :---------------: | ------------------: | | ambient:object | light | default | | spot:object | spotLight | default | | point:object | pointLight | default | | shadowMapSize:number | spotLight | 256 | | debug | SpotLightHelper | false |

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

| key | docs | default | | :-------------------------- | :-------------: | -------------------: | | alpha:boolean | WebGLRenderer | false | | shadowType:number | WebGLRenderer | THREE.BasicShadowMap | | exposure:number | WebGLRenderer | 0.5 | | outputEncoding:number | WebGLRenderer | THREE.sRGBEncoding |

Default physics config

| key | docs | default | | :-------------------- | :---------: | ------: | | physics:boolean | cannon-es | false |

Default stats config

| key | docs | default | | :------------------ | :--------: | ------: | | stats:boolean | stats-js | false |

Features

• Code Linting (eslint)
• maintain if necessary