create-three-sketch v0.0.5
create-three-sketch
The goal of this module is to setup a three.js scene as quickly as possible.
Table of Contents
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.