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