three-shared-renderer

Use one renderer with multiple configs

Usage

module.exports = async () => {
  const THREE = require("three");
  const renderer = require("../index");

  const scene = new THREE.Scene();
  scene.background = new THREE.Color("rgb(255, 0, 255)");
  const camera = new THREE.PerspectiveCamera(50, 1.7777777777777777777777);
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: "rgb(7, 124, 233)" });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  cube.rotation.fromArray([Math.PI / 4, Math.PI / 4, Math.PI / 4]);
  camera.position.z = 5;

  renderer.render(
    {
      renderSize: 250
    },
    scene,
    camera
  );

  return renderer.getDomElement();
};

Exports

customRenderer

customRenderer(renderConfigs);

Generate shared renderer with new settings Options object gets passed to new THREE.WebGLRenderer

defaultSettings

Object with default values for settings object

Renderer Functions

render

render(settings, scene, camera);

Render to element returned from getDomElement with .settings, .scene, and .camera

renderToTarget

renderToTarget(settings, scene, camera, target, clear);

Render to render target .target with .settings, .scene, and .camera

renderToCanvas

renderToCanvas(settings, scene, camera, canvas);

Render to element returned from getDomElement then copy result to .canvas with .settings, .scene, and .camera

renderToCanvasTexture

renderToCanvasTexture(settings, scene, camera, canvasTexture);

Render to element returned from getDomElement then copy result to canvas in .canvasTexture with .settings, .scene, and .camera

updateCubeMap

updateCubeMap(settings, scene, cubeCamera);

Render to .cubeCamera texture with .settings, .scene, and .cubeCamera

getDomElement

getDomElement();

Return domElement which is rendered to

Render Settings

autoClear

type|default ----|------- boolean|true

Sets renderer.autoClear where renderer is a THREE.WebGLRenderer

autoClearColor

type|default ----|------- boolean|true

Sets renderer.autoClearColor where renderer is a THREE.WebGLRenderer

autoClearDepth

type|default ----|------- boolean|true

Sets renderer.autoClearDepth where renderer is a THREE.WebGLRenderer

autoClearStencil

type|default ----|------- boolean|true

Sets renderer.autoClearStencil where renderer is a THREE.WebGLRenderer

gammaFactor

type|default ----|------- number|2

Sets renderer.gammaFactor where renderer is a THREE.WebGLRenderer

gammaInput

type|default ----|------- boolean|false

Sets renderer.gammaInput where renderer is a THREE.WebGLRenderer

gammaOutput

type|default ----|------- boolean|false

Sets renderer.gammaOutput where renderer is a THREE.WebGLRenderer

physicallyCorrectLights

type|default ----|------- boolean|false

Sets renderer.physicallyCorrectLights where renderer is a THREE.WebGLRenderer

enableShadows

type|default ----|------- boolean|true

Sets renderer.shadowMap.enabled where renderer is a THREE.WebGLRenderer

aspectRatio

type|default ----|------- number|1.7777777777777777

Sets aspect ratio of renderer

renderSize

type|default ----|------- number|720

Sets height of renderer, width is set by aspect ratio

shadowQuality

type|default ----|------- number|0

Set shadow map type.

• 0 - 1/3 = THREE.BasicShadowMap
• 1/3 - 2/3 = THREE.PCFShadowMap
• 2/3 - 1 = THREE.PCFSoftShadowMap