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);