Working with a scene

First add the shutter js file shutter-engine.umd.js to your project.

<script src="https://d37s32k1cjsc0b.cloudfront.net/shutter-engine.umd.js"></script>

Creating a scene

First create a canvas element in your HTML.

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

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

<script>
	const scene = document.getElementById("scene");
	const shutterEngine = new ShutterEngine(scene);

	shutterEngine.start();
</script>

Updating the shutter specifications

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

shutterEngine.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)

shutterEngine.start();

Stop

Stop the threejs render loop

shutterEngine.stop();

Screenshot

Captures a technical drawing screenshot of the shutterEngine.

shutterEngine.screenshot();

Toggle Frames

Toggles the angles for each of the frame posts

shutterEngine.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

shutterEngine.toggleLouvres();

Toggle Blinds

Toggles the blinds open / closed

shutterEngine.toggleBlinds();

View Top

Moves the camera to the top of the drawing

shutterEngine.viewTop();

View Front

Moves the camera to the front of the drawing

shutterEngine.viewFront();

Camera Controls

There are many ways to manipulate the camera programmatically. You can find the full api here (opens new window).

shutterEngine.primaryCamera.controls.zoom(0.5);

Louvre Controls

Changes the louvre angle. This can be used to rotate the louvres programmatically.

shutterEngine.state.louvres.rotation.set(val);

Defaults

The shutter drawing uses a number of default values for the various parameters. 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.

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,
			// 	},
		],
		textHeight: 30,
	},

	// 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,
		blindColour: '#00ffff',
		textHeight: 30,
	},

	// Door options
	door: {
		depth: 12,
		hasControlRod: true,
		controlRodPosition: 'Center',
		isSolidPanel: false,
		isRaisedPanel: false,
		noLouvres: false,
		midrails: [],
		midrailHeight: 44,
		pulls: [],
		pullStyle: false, // accepts [ball, cylinder, ring]
		pullColour: '#c7aa4e',
		controlSplits: [],
		stileWidth: 34,
		railHeight: 68,
		hingeColor: '#dbd7e2',
		louvreCounts: [],
		openAngle: 30,
		closedAngle: 0,
		toggleSpeed: 1000,
		tooltipHeight: 30, // For door tooltip
		textHeight: 30, // For text tooltips
	},

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

	// Solid panel options
	solidpanel: {},
};

Fields

Field Name	Field Type	Example	Field Description
shutter.layoutCode	String	"LTR"	Layout code of the shutter.
shutter.width	Number	1200	The width of the shutter.
shutter.height	Number	500	The height of the shutter.
shutter.depth	Number	24	The depth of the shutter.
shutter.color	String	"#ffffff"	The color HEX code of the shutter.
shutter.grained	Boolean	false	Indicates if the shutter is grained.
shutter.posts[].position	Number	600	The position of the post.
shutter.posts[].angle	Number	135	The angle of the post.
shutter.posts[].textHeight	Number	30	The shutter dimensions text size
frame.borders.T	Number	22	The thickness of the top border.
frame.borders.B	Number	22	The thickness of the bottom border.
frame.borders.L	Number	22	The thickness of the left border.
frame.borders.R	Number	22	The thickness of the right border.
frame.buildOuts.T	Number	0	The build-out size for the top.
frame.buildOuts.B	Number	0	The build-out size for the bottom.
frame.buildOuts.L	Number	0	The build-out size for the left.
frame.buildOuts.R	Number	0	The build-out size for the right.
frame.tierSplit	Boolean	false	Indicates if the frame has a tier split.
frame.horizontalTHeight	Number	44	The height of the horizontal 'T' section.
frame.verticalTWidth	Number	44	The width of the vertical 'T' section.
frame.hasBlind	Boolean	false	Indicates if the frame includes a blind.
frame.hasRoller	Boolean	false	Indicates if the frame includes a roller.
frame.blindColour	String	#00ffff	The colour of the blind
frame.textHeight	Boolean	false	The frame dimensions text size
door.depth	Number	12	The depth of the doors.
door.hasControlRod	Boolean	true	Indicates if the door has a control rod/type.
door.controlRodPosition	String	"Center","Inside"	The position of the control rod.
door.isSolidPanel	Boolean	false	Indicates if the door is a solid panel.
door.isRaisedPanel	Boolean	false	Indicates if the door is a raised panel.
door.noLouvres	Boolean	false	Indicates if the door has no louvres.
door.midrails[]	Number	400	The position of the midrail.
door.midrailHeight	Number	44	The height of the midrail.
door.controlSplits[]	Number	800	The position of the control split.
door.stileWidth	Number	34	The width of the stile.
door.railHeight	Number	68	The height of the rail.
door.hingeColor	String	"#dbd7e2"	The color HEX code for the hinge.
door.openAngle	Number	30	The angle at which the door opens.
door.closedAngle	Number	0	The angle at which the door closes.
door.toggleSpeed	Number	1000	The speed at which the doors open and close.
door.tooltipHeight	Number	30	The door tooltip size
door.textHeight	Number	30	The door dimensions text size
louvre.height	Number	47	The height of the louvre.
louvre.depth	Number	5	The depth of the louvre.
louvre.openAngle	Number	160	The angle at which the louvre opens.
louvre.closedAngle	Number	10	The angle at which the louvre closes.
louvre.open	Boolean	false	Indicates if the louvre is open.
louvre.toggleSpeed	Number	1000	The speed at which the louvres open and close.