Canvas 3D

Document 3D, Model 3D and Model Data 3D.

Document 3D

A Document 3D extend Cx.Document with 3D helpers. Given an id in the server of a Document 3D the load function is the same as with normal documents:

Cx.Document.load$(id) .then(function(doc){ 
// doc is of type Cx3D.Document

Properties	Type	Def	Definition
`model3D`	String	null	Server Id of associated Model 3D
`modelData3D`	String	null	Server Id of associated Model Data 3D

The 3D document overwrites the document add function. It can trigger an active layer change so islands don’t get mixed with the design.

doc.add(figures);

Helper methods to work with islands and design layers

doc.islandsLayer(); // return active page islands layer
doc.designLayers(); // return active page design layers

doc.islandsLayer(page); // return page islands layer
doc.designLayers(page); // return page design layers

doc.isTextureIsland(figure);

Texture islands with the same name across all pages should share the same brush to keep the system consistent. Use the following function when changing the brush of a texture island:

doc.textureIslandBrush(figure,brush);

One possible flow for a multi size 3D application is to ask the user to design one size to create a template that will be copied over all other sizes. The following function implements a scaled or non scaled copy, it is expected that the arrangements in both documents are similar.

doc.copyDesignTo$(doc,{scaled:false}) .then( ...

Model 3D

Given a Document 3D, the associated model can be accesed with:

doc.loadModel3D$() .then(function(model) { ...

In case of having the server id of the Model, or the Xml representation:

Cx3D.Model.load$(id) .then(function(model){ ...

var model = Cx3D.Model.fromXml(xml);

var model = Cx3D.Model.fromXmlString(s);

Properties	Type	Def	Definition
`modelData3D`	String	null	Server Id of associated Model Data 3D

An empty working space document associated with this model can be created with:

model.createDocument3D$() .then(function(doc3D){ ...

A new arrangement containing all islands in their original position can be create with:

var page = model.createCustomPage(name);

Model Data 3D

Given a Model 3D, the associated model data can be loaded with:

model.loadModelData3D$() .then(function(modelData){ ...

Or using its server id:

Cx3D.ModelData.load$(id) .then(function(modelData){ ...

Properties	Type	Def	Definition
`data`	json	`null`	3D polygonal data
`id`	String	`null`	Server Id

Production Texture

var texture = Cx3D.ProductionTexture({ renderTo: domId });

Properties	Type	Def	Definition
`document`	Document 3D	`null`	Working space document
`model`	Model 3D	`null`	Model 3D
`dpi`	Number	`2 * 25.4`	Resolution
`showSelectedFigures`	Boolean	`true`	Show selection in 3D

texture.watch(canvas);

texture.dispose();
texture.updateSize();

Model View

var mv = Cx3D.ModelView({ renderTo: domId });

Properties	Type	Def	Definition
`backgroundColor`	Color	Gray	Background color, null for transparency
`autoRotate`	Boolean	`false`	Auto rotate model
`loadingAnimationMessage`	String	`'Loading 3D Model'`	Message

mv.modelData(modelData);

mv.watch(texture);

mv.dispose();
mv.image();
mv.updateSize();

mv.zoomToFront();
mv.zoomToBack();
mv.zoomToRight();
mv.zoomToLeft();

mv.zoomIn(scale);
mv.zoomOut(scale);

mv.rotateCameraRight(angle);
mv.rotateCameraLeft(angle);
mv.rotateCameraDown(angle);
mv.rotateCameraUp(angle);

mv.rotateModelRight(angle);
mv.rotateModelLeft(angle);
mv.rotateModelDown(angle);
mv.rotateModelUp(angle);

Thumbail image

Cx3D.thumbnailImage$(config);

3D Preview

var preview = Cx3D.createPreview(domId,docId);