create-three-sketch

The goal of this module is to setup a three.js scene as quickly as possible.

Table of Contents

• Install
• Usage
• API

Install

npm install --save create-three-sketch

Usage

To get started, first pass in your instance of THREE. This will return a function that takes an options object.

import * as THREE from 'three'
import createSketch from 'create-three-sketch'
 
const app = createSketch(THREE)({
  ortho: true, // Use a THREE.OrthographicCamera. Defaults to false.
})

API

Once the app is initialized, you have a Three.js scene complete with a render loop, auto-resized canvas, orbit controls, and lighting.

Properties

viewport - Up-to-date window dimensions as an array, [width, height]

renderer - Access the THREE.WebGLRenderer instance.

camera - Access the camera instance. THREE.PerspectiveCamera is the default camera.

scene - Access the THREE.Scene instance.

controls - Access the THREE.OrbitControls instance created using this package by mattdesl.

lights - Access a THREE.Group containing all the default lighting.

Options

ortho - defaults to false. Set to true if you would like to use the THREE.OrthographicCamera.

Events

Listen for application render or window resize events using the on method:

app.on('render', deltaTime => {
  // Fires every frame.
  //
  // You do not need to worry about telling the app to render. Rendering is handled internally.
})
 
app.on('resize', (w, h) => {
  // Fires on window resize events. Viewport dimensions are passed in as the first two arguments.
})

I want to keep this as simple as possible, but I am willing to add options if anyone would like a little more configurability, so please feel free to create an issue or make a pull request.