Cango3D Dynamic Transforms

Group3D Dynamic Transforms

The article described the characteristics of the Cango3D dynamic transforms, rotate, translate, scale, scaleNonUniform, roll, pitch and yaw and how to use them effectively.

Cango3D graphics library uses the Group3D call as the principal structure for 3D animation and drag and drop applications. To do this a Group3D is constructed from an array of child Group3D and Path3D primitive objects. The Group3D children have their own array of children forming a family tree of objects, just the leaf Path3D objects are actually drawn. The tree structure just allows the many components to be moved as a single entity and as a vehicle for applying animation or drag-n-drop transforms.

The transforms to be applied are pushed into an array and accumulate until the Group3D is rendered to the canvas. After rendering, the array of transforms is reset to empty. So the next animation frame or drag-n-drop movement event requires a new set of transforms to be applied. If the movement is programmed as an incremental change to the current state, the code of the next render will need the position, size and orientation of the 'as drawn' objects. To this end, Cango3D generates a minimal set of transforms that would reposition the object is saved and made available by the 'transformRestore' method.

Tips on Drag-N-Drop usage

Drag-and-drop handlers uses two basic approaches to position objects based on the cursor movement, either the absolute movement of the cursor from at the grab event or the incremental movement of the cursor from when it was last drawn. These same cursor movements are often used to rotate the target object, Cango3D calculates the absolute and increnmental effective rotation angles about each of the X,Y,Z axes. These absolute and offset position and rotation values are passed to the drag-n-drop event handler in the 'eventData' object. The eventData object property values can be used as the arguments for Group3D transform methods that actually reposition the objects be drawn.

Tips for Animation

Cang3D Animation module provides the 'animation' object that takes as an argument a 'path' function that takes as an argument the time elapsed since the start of playing the animation and generates new values of position, orientation or maybe size of the objects being animated. These calculated values can then be used a arguments for the Group3D transform methods.

Transform Method demonstration

Shown below is a 3D object (paper plane) with slider controls to demonstrate the effect of the various transforms available to all Cango3D Groups.

Drag-N-drop example code

The event handlers for each slider movement event are all very similar:

function buildCube(width, colors)
{
  ...
}

function turnCube(cvsID)
{
  function dragCube(evt)
  {
    cube.transformRestore();
    cube.rotateX(evt.dragOfsAngles.xa);
    cube.rotateY(evt.dragOfsAngles.ya);
    requestAnimationFrame(()=>g.render(cube));
  }

  const g = new Cango3D(cvsID);
  g.setPropertyDefault("backgroundColor", "wheat");
  g.clearCanvas();  // clears to canvas background color
  g.setWorldCoords3D(-120, -120, 300);
  g.setFOV(40);

  const cube = buildCube(100, ["green", "blue", "yellow", "cyan", "sienna", "red"]);
  const txt = new Text3D("Drag Me", {strokeColor:"white", fontSize: 20, lorg: 5});
  cube.children[0].label(txt);
  // cube is now positioned on the origin 0,0,0
  cube.enableDrag(dragCube);
  cube.rotate(10, 10, 10, 25);
  g.render(cube);
}