Howtos

How to...

• Create a new scene
• Return the $3d object of a container
• Texture a surface
• Add a skybox
• Create your own (custom) tags

Create a new scene

• Either use the method addScene() or
• append the container with a <scene></scene> tag using append()

Return the $3d object of a container

The object is returned after each reference to the main three() constructor:

$3d = $(container).three()

Texture a surface

• Either add a class to the mesh tag that contains a background-image property:

<sphere class="moon"></sphere>

• or define it as a data attribute (named "map"):

<sphere map="/examples/assets/img/moon_1k.jpg"></sphere>

Add a skybox

Just add a background-image attribute on the scene tag. The current implementation expects 6 images in a specific order:

scene {
	background-image: 
url(assets/img/skybox/bluesky/px.jpg), url(assets/img/skybox/bluesky/nx.jpg), 
url(assets/img/skybox/bluesky/py.jpg), url(assets/img/skybox/bluesky/ny.jpg), 
url(assets/img/skybox/bluesky/pz.jpg), url(assets/img/skybox/bluesky/nz.jpg);
}			

Create your own (custom) tags

Extend the Three lib with an internal method:

Three.prototype.fn.webgl.TagName = function(){ ... };

You are now ready to use the tag with <TagName></TagName>