My 3D Library Test

wellflat

2010-08-01 22:45:57

License: MIT License

Fork: 2

Fav: 6

View: 2312

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 44 lines
CSS 5 lines

My 3D Library Test
my3dlib.js

var screen = new Screen(300, 300, 55);
  var scene = new Scene3D();
  var renderer = new BasicRenderEngine(canvas, screen);
  var material = new WireframeMaterial(canvas, '#0099ff', 1);

var scale = 50;
  var h = Math.sqrt(3)/2*scale;
  var vertices = [
    new Vertex3D(0, h, h),
    new Vertex3D(-scale, -h, h),
    new Vertex3D(scale, -h, h),
    new Vertex3D(0, 0, -h)
  ];
  var triangular = [
    new TriangleMesh3D(material, [vertices[0], vertices[1], vertices[2]]),
    new TriangleMesh3D(material, [vertices[0], vertices[2], vertices[3]]),
    new TriangleMesh3D(material, [vertices[0], vertices[3], vertices[1]]),
    new TriangleMesh3D(material, [vertices[3], vertices[2], vertices[1]])
  ];
  scene.addObject(triangular);
  renderer.renderScene(scene, 0.05);
  playBtn.addEventListener('click', function(e) {
    renderer.renderScene(scene, 0.05);
  }, false);
  stopBtn.addEventListener('click', function(e) {
    renderer.stop();
  }, false);
}, false);
</script>

My 3D Library Test

<section> <h2>My 3D Library Test</h2> <div class="wrap"> <canvas id="Canvas" width="300" height="300"></canvas> <input id="PlayButton" type="button" value=" play " > <input id="StopButton" type="button" value=" stop " > </div> </section> <script> window.addEventListener('load', function(e) { var canvas = document.querySelector('#Canvas'); var playBtn = document.querySelector('#PlayButton'); var stopBtn = document.querySelector('#StopButton'); var screen = new Screen(300, 300, 55); var scene = new Scene3D(); var renderer = new BasicRenderEngine(canvas, screen); var material = new WireframeMaterial(canvas, '#0099ff', 1); var scale = 50; var h = Math.sqrt(3)/2*scale; var vertices = [ new Vertex3D(0, h, h), new Vertex3D(-scale, -h, h), new Vertex3D(scale, -h, h), new Vertex3D(0, 0, -h) ]; var triangular = [ new TriangleMesh3D(material, [vertices[0], vertices[1], vertices[2]]), new TriangleMesh3D(material, [vertices[0], vertices[2], vertices[3]]), new TriangleMesh3D(material, [vertices[0], vertices[3], vertices[1]]), new TriangleMesh3D(material, [vertices[3], vertices[2], vertices[1]]) ]; scene.addObject(triangular); renderer.renderScene(scene, 0.05); playBtn.addEventListener('click', function(e) { renderer.renderScene(scene, 0.05); }, false); stopBtn.addEventListener('click', function(e) { renderer.stop(); }, false); }, false); </script> body{ font-size:12px; color:#ccc; background-color:#000; text-align:center; margin:20px; } .wrap{ width:300px; margin:20px auto; display: block;} canvas{ border:1px solid #0099ff; } input[type="button"]{ font-family:Verdana, sans-serif; color:#fff; background-color:#666; border:none; padding:2px 8px; } input[type="button"]:hover{ background-color: #333; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/zmko/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/wellflat/zmko" title="My 3D Library Test">My 3D Library Test - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip