Dom3D: 3D DOM Element Engine

The Basics

Building a scene:

<div id="my-stage3d">
	<div class="dom3d-group3d">
		<div class="dom3d-element3d"></div>
		<div class="dom3d-element3d"></div>
	</div>
</div>

<script>
	var myStage = new dom3d.Stage3D('#my-stage3d'); // the rest is automatic
</script>

The above builds a simple scene using the DOM and CSS classes to indicate how to automatically build the scene.

Automatic Scene-Builder Classes

no dom3d- prefixed classes - Makes it a Group3D if it has children and an Element3D if it doesn't.

dom3d-group3d - Will make this element a Group3D.

dom3d-element3d - Will make this element an Element3D. The object's lockFacingFront property can be set to true by also including a CSS class dom3d-lockfacingfront. Any element inside one of these will be treated as a normal DOM element that is part of this plane being manipulated, not a 3D object with its own transforms.

dom3d-no-3d - Ignores the element and does not try to make it part of a 3D scene. This does not exclude it from you manually using it for an object you instantiate with script later.

dom3d-paperelement3d - Will make this element a PaperElement3D object. It can also have children elements that utilize the classes dom3d-front and dom3d-back to automatically make its front and back. Any element inside one of these will be treated as a normal DOM element that is part of this plane being manipulated, not a 3D object with its own transforms, including the front/back.

dom3d-sprite3d - Will make this element a Sprite3D object. When auto-making a Sprite3D in the DOM you must include 4 data-attributes: data-src="image-path.png", data-width="10", data-height="10", and data-frames="10" for the path to the spritesheet, the width of the frames, height of frames, and total frame count. They can also take the attributes data-regX and data-regY to set a registration point for the object. Should not contain any other DOM elements.

dom3d-orthoprimitive - Will make this element a Group3D and assume all it's children should be made into OrthoFace objects.

dom3d-orthoface - Will make it an OrthoFace object. Any element inside one of these will be treated as a normal DOM element that is part of this plane being manipulated, not a 3D object with its own transforms.