Tutorial

3D Applications

Simple 3D Application

For applications that needs to preview a product and offer basic modifications in 3D, a light weight version of the 3D machinery can be used. The model view 

Cx3D.createPreview(domId,docId);

This function will give you back a Cx3D.Preview object that derives from Cx3D.ModelView and holds a Cx3D.ProductionTexture internally to make things easier on the dev side. This kind of application doesn’t use a Cx.Canvas at all, improving the performance in case many previews are used on the same page.

A demo can be found here.

<!DOCTYPE html>
<html>
  <head> <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>Cx Canvas</title>
      <script type="text/javascript" src="http://cadxcdn.blob.core.windows.net/core-edge/Cx-include.js"></script> 
      <script type="text/javascript" src="http://cadxcdn.blob.core.windows.net/canvas-edge/Canvas-include.js"></script>
      <script type="text/javascript">
        Cx.Config.three = true;
        Cx.js( Cx.Core( { base: 'http://cadxcdn.blob.core.windows.net/core-edge' } ),
               Cx.Canvas( { base: 'http://cadxcdn.blob.core.windows.net/canvas-edge' } ) );
      </script>
  </head>
  <body>
    <div id="preview" style="width:500px;height:500px;"></div>
    <script type="text/javascript">
      Cx.ready(function(){
      Cx3D.createPreview('preview','8c4642b0-4669-4da9-a22c-b1e058f7ec2f');
      });
    </script>
  </body>
</html>

Document Filter

If the app wants to show a modified version of the template, to avoid flickering, the document needs to be modified before any rendering. This is done using a document filter function:

Cx3D.createPreview( domId, docId, function(doc){
  // modify what you want, no need to commit anything
  // if you need any metrics, return the promises so we can wait for them
});

For example, modifying the first Text in the document is done with:

var preview = Cx3D.createPreview('preview','8c4642b0-4669-4da9-a22c-b1e058f7ec2f',function(doc){
  var figure = Cx.findByType( doc.allPagesFigures(), Cx.Text );
  if( figure )
    figure.text('New text');
});

Modifying the document with user input

If the apps wants to show the original template, and later allow the user to change the text.

preview.ready$() .then(function(doc){
  // Ok, document is loaded, you can enable your text box or buttons
})

Change actions over the document are written as usual:

// this shouldn't be called if the preview is not ready...
onTextChanged: function(value){
  var doc = preview.document();
  var figure = Cx.findByType( doc.allPagesFigures(), Cx.Text );
  if( figure ){
    figure.text(value);
    doc.commit$();
  }
}

Full Canvas Application

Later…