Shutter Drawing Docs

# Working with a scene

First add the shutter js file shutter-engine.es.js to your project. This file contains a Scene class export which can be imported in your js like so;

import { Scene } from './shutter-engine.es.js';

# Creating a scene

First create a canvas element in your HTML.

<canvas id="scene"></canvas>

Grab the canvas and create a new Scene class instance, passing the dom object as a variable

const canvas = document.querySelector('#scene');
const scene = new Scene(canvas);
scene.start();

# Updating the shutter specifications

To update the shutter use the updateSpecifications method on the new scene. Accepts an object containing updated shutter specifications.

scene.updateSpecifications({
	shutter: {
		layoutCode: 'LRBLR',
		width: 1000,
		height: 1000,
		depth: 24,
		grained: false,
		posts: [
			{
				angle: 135,
				position: 500,
			},
		],
	},

	frame: {
		tierSplit: 750,
	},

	door: {
		midrails: [500],
		controlSplits: [250],
	},
});

# Interacting with the scene

The scene contains various methods that can be used to interact with the drawing.

# Start

Start the threejs render loop (initially the render will start by default, but this can be used to restart the render after it has been manually stopped)

scene.start();

# Stop

Stop the threejs render loop

scene.stop();

# Screenshot

Captures a technical drawing screenshot of the scene.

scene.screenshot();

# Toggle Frames

Toggles the angles for each of the frame posts

scene.toggleFrames();

# Toggle Doors

Toggles the doors open / closed. You can optionally pass a percentage value for how far the door will open.

shutterEngine.toggleDoors();

// or

shutterEngine.toggleDoors(25);

# Toggle Louvres

Toggles the louvres open / closed

scene.toggleLouvres();

# Toggle Blinds

Toggles the blinds open / closed

scene.toggleBlinds();

# View Top

Moves the camera to the top of the drawing

scene.viewTop();

# View Front

Moves the camera to the front of the drawing

scene.viewFront();

# Defaults

The shutter drawing uses a number of default values for the various parameters. These values can be found in the defaults.js file. Shutter specifications will subsequently be updated using the updateSpecifications() method on the scene, but any value that is not updated will default to what is in this file.

WARNING

The defaults.shutter.posts[] array must contain a post object for each post in the layoutcode. If the layoutcode contains no posts, ensure this array is empty. An example of this post object can be seen commented-out below.

const defaults = {
	// Shutter options
	shutter: {
		layoutCode: 'LR',
		width: 1000,
		height: 1000,
		depth: 24,
		color: '#ffffff',
		grained: false,
		posts: [
			// 	{
			// 		position: 500,
			// 		angle: 135,
			// 	},
		],
	},

	// Frame options
	frame: {
		borders: {
			T: 22,
			B: 22,
			L: 22,
			R: 22,
		},
		buildOuts: {
			T: 0,
			B: 0,
			L: 0,
			R: 0,
		},
		tierSplit: false,
		horizontalTHeight: 44,
		verticalTWidth: 44,
		hasBlind: false,
		hasRoller: false,
	},

	// Door options
	door: {
		depth: 12,
		hasControlRod: true,
		controlRodPosition: 'Center',
		isSolidPanel: false,
		isRaisedPanel: false,
		noLouvres: false,
		midrails: [],
		midrailHeight: 44,
		controlSplits: [],
		stileWidth: 34,
		railHeight: 68,
		hingeColor: '#dbd7e2',
		louvreCounts: [],
		openAngle: 30,
	},

	// Louvre options
	louvre: {
		height: 47,
		depth: 5,
		openAngle: 160,
		closedAngle: 10,
		open: false,
	},
};

← Defaults →