Back to index

3D nodes: line, Box, Cone, Cylinder and clickable Sphere

$(function() { var myCanvas = $('#3dcanvas').scene3d({ width:"400px", height:"400px", background: "#eeffee", ViewpointPosition: '-4 -2 12 ', ViewpointOrientation: '-2 4 -2 -.4', }); // 3D coordinate system myCanvas.addLine({x1:-4,x2:4,color:'#ff0000'}); myCanvas.addLine({y1:-4,y2:4,color:'#00ff00'}); myCanvas.addLine({z1:-4,z2:4,color:'#0000ff'}) myCanvas.addSphere ({ x:1.2, y:0, z:2, radius:1, color:'#ff00ff', id:'mySphere', onclick:'sphereClickHandler(this)', "data-description":'This is my sphere!' }); myCanvas.addBox ({x:1.2,y:1,z:2,width:1,depth:1,height:1,color:'#efef00'}); myCanvas.addCone ({x:1.2,y:2,z:2,color:'#0000ff',label:'3D Objects'}); myCanvas.addCylinder ({x:1.2,y:-2,z:2,radius:0.5,height:2,color:'#00aaff'}); // remove sphere click handler $('#remove').on('click', function () { myCanvas.removeShape ( '#mySphere' ); }); // handle clicks on sphere sphereClickHandler = function( gObj ) { alert ( $(gObj).data('description') ); } }); ... ... ... <button id='remove'>remove sphere</button>