Adding custom geometry to the 3D sceneΒΆ

This sample demonstrates how to add custom geometry to the 3d scene. The code places small spheres on a helical structure and colors them using a gradient.


Source Code

<script>
var parent = document.getElementById('viewer');
viewer = pv.Viewer(parent, {
    width : '300', height: '300', antialias : true,
    outline : true, quality : 'high', style : 'hemilight',
});
viewer.on('viewerReady', function() {
  var helix = viewer.customMesh('custom');
  for (var i = -50; i < 50; ++i) {
    var x = Math.cos(i * 0.4);
    var y = i * 0.1;
    var z = Math.sin(i * 0.4);
    var color = i * 0.01 + 0.5;
    // add sphere at the given position with a radius of 0.1
    helix.addSphere([x,y,z], 0.1, { color : [color, color, 0]});

    // add a capped tube  in the center of the helix with a
    // radius of 0.1
    helix.addTube([0, -5, 0], [0, 5, 0], 0.1,
                  { cap : true, color : 'blue' });

    // set zoom to a pre-determined value. Alternatively,
    // viewer.autoZoom() can be used.
    viewer.setZoom(14);
  }
});

</script>