Items

There are a number of standard 3D objects, refered to in CanvasMap as Items, that you can add to your scenes.

Adding Items

Add the following code to your "OnLoad()" function. Then refresh the page and find the new item in the layer menu.

var TheLayerObjects=new CM3LayerItems();
TheLayerObjects.SetSetting("Name","3D Items");

TheMainContainer.AddLayer(TheLayerObjects);

Try right clicking on the 3D Items layer and then adding a box to the scene. It should appear in the middle of the scene and if you click on it, you can move it around. There are a number of different items you can add to your scenes, including text. You'll want to checkout the tutorial on 3D coordinates before adding these.

Boxes, Cylinders, Cones, Pyramids, and Spheres

The code below will add a simple box to your layer of items and position it within the scene. You can size the box by setting its Dimensions.

// add a simple box
var TheBox=new CM3ItemBox();
TheBox.SetSetting("Style","fillStyle","rgba(255,0,0,0.5)");
TheBox.SetSetting("Position","Translations",[0,0,10]); 
TheBox.SetSetting("Dimensions","Width",10);
TheBox.SetSetting("Dimensions","Height",20);
TheBox.SetSetting("Dimensions","Depth",5);

TheLayerItems.AddChild(TheBox);

Below are the other types of simple items you can create and the settings that can be specified with Dimensions for each type:

• CM3ItemBox.BOX: Width, Height, Depths
• CM3ItemBox.PYRAMID: Width, Height, NumSides
• CM3ItemBox.CONE: TopRadius, BottomRadius, Height, NumSides
• CM3ItemBox.CYLINDER: Radius, Height, NumSides
• CM3ItemBox.SPHERE: Radius, NumSides

Other Items from THREE.js

THREE.js has a number of 3D objects that can be loaded into a CMLayerItems layer. Just create an object in the same way as we just did above except use one of the following constructors. Then, set the Dimensions for the item based on the settings that are available for that item type in reference material or editor.

• CM3ItemSphere()
• CM3ItemRing()
• CM3ItemPlane()
• CM3ItemPolyhedra(Type) - available types are: "Tetrahedron","Dodecahedron","Octahedron","Icosahedron"
• CM3ItemTorus()
• CM3ItemTorusKnot()
• CM3ItemCircle()

Other Items

There are some other items available with the 3D version of CanvasMap and it is also relatively easy to create your own custom 3D items. Just start with one of the item classes such as CMItemBox and change it to create the items you want to add to your scene.

CM3ItemLoaded

One example of a simple item class is CM3ItemLoaded. This class allows you to load 3D models that are in the GLTF file format. Juse specify a URL as the setting and then add the item as you would other ites. You can also set the items PossitionOffset, Rotation, and Scale. Below is an example.

var URL="https://gsp.humboldt.edu/Archive/3DObjects/2019/adamHead/adamHead.gltf"; // URL for the file

var TheItem=new CM3ItemLoaded();
TheItem.SetSetting("Source","URL",URL); 
TheItem.SetSetting("Item","PositionOffset",[0,0,100]);
TheItem.SetSetting("Item","Scale",[10,10,10]);
TheLayerItems.AddChild(TheItem);

If you take a look at the code for CM3ItemLoaded class, you'll see it is realtively easy to create new items.