q3dlib demo

gct256

2010-08-30 15:06:56

License: MIT License

Fork: 1

Fav: 8

View: 1136

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 106 lines
HTML 17 lines
CSS 12 lines

q3dlib demo
q3dlib / quickie 3d library

q3d_bindCanvas('canvas');
var TEXTURE = document.getElementById('texture');

var ROTATE_X = 0;
var ROTATE_Y = 0;

var HANCHO = Math.random() < 0.5;
var FIGURES = new q3d_Group;

function initialize() {
  var ov = 30, oy0 = -40, oy1 = -70, oy2 = -100;
  var dy = HANCHO ? 20 : 0;
  // octahedron
  FIGURES.add(
    new q3d_Patch(0,oy0,0, -ov,oy1,  0,   0,oy1, ov, 1).setColor('#f00'),
    new q3d_Patch(0,oy0,0,   0,oy1, ov,  ov,oy1,  0, 1).setColor('#0f0'),
    new q3d_Patch(0,oy0,0,  ov,oy1,  0,   0,oy1,-ov, 1).setColor('#00f'),
    new q3d_Patch(0,oy0,0,   0,oy1,-ov, -ov,oy1,  0, 1).setColor('#ff0'),
    new q3d_Patch(0,oy2,0,  ov,oy1,  0,   0,oy1, ov, 1).setColor('#ff0'),
    new q3d_Patch(0,oy2,0,   0,oy1,-ov,  ov,oy1,  0, 1).setColor('#f00'),
    new q3d_Patch(0,oy2,0, -ov,oy1,  0,   0,oy1,-ov, 1).setColor('#0f0'),
    new q3d_Patch(0,oy2,0,   0,oy1, ov, -ov,oy1,  0, 1).setColor('#00f'),
    // color cube
    new q3d_Cuboid(-70,0,0, 20,20,20).
      setColor1(0, '#f00', '#f00').
      setColor1(1, '#0f0', '#0f0').
      setColor1(2, '#00f', '#00f').
      setColor1(3, '#0ff', '#0ff').
      setColor1(4, '#f0f', '#f0f').
      setColor1(5, '#ff0', '#ff0'),
    // dice
    new q3d_Cuboid(0,0,0, 20,20,20, 1).
      setTexture(TEXTURE).
      setUV1(0,  0,dy, 20,dy,  0,dy + 20).
      setUV1(1, 20,dy, 40,dy, 20,dy + 20).
      setUV1(2, 40,dy, 60,dy, 40,dy + 20).
      setUV1(3,  0,20, 20,20,  0,40).
      setUV1(4, 20,20, 40,20, 20,40).
      setUV1(5, 40,20, 60,20, 40,40),
    // reversed cube
    new q3d_Cuboid(70,0,0,20,20,20).reverse().
      setColor1(0, '#800', '#800').
      setColor1(1, '#080', '#080').
      setColor1(2, '#008', '#008').
      setColor1(3, '#088', '#088').
      setColor1(4, '#808', '#808').
      setColor1(5, '#880', '#880'),
    // culling
    new q3d_Patch(-20,50,0,  0,50,0, -20,70,0),
    new q3d_Patch(  0,50,0, 20,50,0,   0,70,0).reverse(),
    new q3d_Patch(-20,70,0,  0,70,0, -20,90,0).culling(true, true),
    new q3d_Patch(  0,70,0, 20,70,0,   0,90,0).culling(false, false));

// point cube
  var c;
  for (var r = 0; r <= 255; r += 51) {
    for (var g = 0; g <= 255; g += 51) {
      for (var b = 0; b <= 255; b += 51) {
        c = 'rgb(' + r + ',' + g + ',' + b + ')';
        FIGURES.add(new q3d_Point((r - 128) / 8,
                                  (g - 128) / 8,
                                  (b - 128) / 8 - 70, 3, r < 128).
          setColor(c, c));
      }
    }
  }
}

function drawTest() {
  q3d_resizeCanvas(200, 200);
  q3d_cleanup();

q3d_rotateX(ROTATE_X);
  q3d_rotateY(ROTATE_Y);

FIGURES.put();

q3d_updateCanvas();
}

q3dlib demo

q3d_bindCanvas('canvas'); var TEXTURE = document.getElementById('texture'); var ROTATE_X = 0; var ROTATE_Y = 0; var HANCHO = Math.random() < 0.5; var FIGURES = new q3d_Group; function initialize() { var ov = 30, oy0 = -40, oy1 = -70, oy2 = -100; var dy = HANCHO ? 20 : 0; // octahedron FIGURES.add( new q3d_Patch(0,oy0,0, -ov,oy1, 0, 0,oy1, ov, 1).setColor('#f00'), new q3d_Patch(0,oy0,0, 0,oy1, ov, ov,oy1, 0, 1).setColor('#0f0'), new q3d_Patch(0,oy0,0, ov,oy1, 0, 0,oy1,-ov, 1).setColor('#00f'), new q3d_Patch(0,oy0,0, 0,oy1,-ov, -ov,oy1, 0, 1).setColor('#ff0'), new q3d_Patch(0,oy2,0, ov,oy1, 0, 0,oy1, ov, 1).setColor('#ff0'), new q3d_Patch(0,oy2,0, 0,oy1,-ov, ov,oy1, 0, 1).setColor('#f00'), new q3d_Patch(0,oy2,0, -ov,oy1, 0, 0,oy1,-ov, 1).setColor('#0f0'), new q3d_Patch(0,oy2,0, 0,oy1, ov, -ov,oy1, 0, 1).setColor('#00f'), // color cube new q3d_Cuboid(-70,0,0, 20,20,20). setColor1(0, '#f00', '#f00'). setColor1(1, '#0f0', '#0f0'). setColor1(2, '#00f', '#00f'). setColor1(3, '#0ff', '#0ff'). setColor1(4, '#f0f', '#f0f'). setColor1(5, '#ff0', '#ff0'), // dice new q3d_Cuboid(0,0,0, 20,20,20, 1). setTexture(TEXTURE). setUV1(0, 0,dy, 20,dy, 0,dy + 20). setUV1(1, 20,dy, 40,dy, 20,dy + 20). setUV1(2, 40,dy, 60,dy, 40,dy + 20). setUV1(3, 0,20, 20,20, 0,40). setUV1(4, 20,20, 40,20, 20,40). setUV1(5, 40,20, 60,20, 40,40), // reversed cube new q3d_Cuboid(70,0,0,20,20,20).reverse(). setColor1(0, '#800', '#800'). setColor1(1, '#080', '#080'). setColor1(2, '#008', '#008'). setColor1(3, '#088', '#088'). setColor1(4, '#808', '#808'). setColor1(5, '#880', '#880'), // culling new q3d_Patch(-20,50,0, 0,50,0, -20,70,0), new q3d_Patch( 0,50,0, 20,50,0, 0,70,0).reverse(), new q3d_Patch(-20,70,0, 0,70,0, -20,90,0).culling(true, true), new q3d_Patch( 0,70,0, 20,70,0, 0,90,0).culling(false, false)); // point cube var c; for (var r = 0; r <= 255; r += 51) { for (var g = 0; g <= 255; g += 51) { for (var b = 0; b <= 255; b += 51) { c = 'rgb(' + r + ',' + g + ',' + b + ')'; FIGURES.add(new q3d_Point((r - 128) / 8, (g - 128) / 8, (b - 128) / 8 - 70, 3, r < 128). setColor(c, c)); } } } } function drawTest() { q3d_resizeCanvas(200, 200); q3d_cleanup(); q3d_rotateX(ROTATE_X); q3d_rotateY(ROTATE_Y); FIGURES.put(); q3d_updateCanvas(); } window.addEventListener('load', function() { var drag = null, cv = q3d_CANVAS; initialize(); window.addEventListener('mousemove', function(ev) { if (drag) { ROTATE_X += ev.pageY - drag[1]; ROTATE_Y += ev.pageX - drag[0]; drag = [ev.pageX, ev.pageY]; drawTest(); } }, false); cv.addEventListener('mousedown', function(ev) { if (ev.which == 1) { drag = [ev.pageX, ev.pageY]; ev.preventDefault(); } }, false); window.addEventListener('mouseup', function(ev) { if (ev.which == 1) { drag = null; ev.preventDefault(); } }, false); drawTest(); }, false); <div class="demo"> <canvas id="canvas"></canvas> <-- drag !<br> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAoCAMAAACVZWnNAAAAP1BMVEUAAAAeHh7/AAD/ExP/a2ugoKDCwsLDw8PS0tLc3Nzh4eHj4+Pk5OTl5eXu7u709PT29vb39/f5+fn6+vr///9M8YMsAAAA7UlEQVRIx9WUwRKDIAxEg2ALiILW///WUmc0gmGMMj2Y45usBMwuvLSxzvVrOWv0m8tAd4MP41bBD53mMjDDNCc1DYbLwPo5K28ja4VoTxm4kIuDi0wAiFMG/ZiLxz6yrJFmJXE2Is02sZJS7RqpDx7YKlZNLMUQ4/Eolj+xZIjx4pm4uSmuGjs+WHP7wcqNy1E0Oxcvl6RZaT2zRpqVjJGNSLOjJT+E/QqsLgyqYui5GYbrir+FxSDJJlwIFoMkm3AVWQySbEITsBhw7XfZknvjXz55HzmlO/9HXDU258GqftX9JalazypjPDPDvjQFjFWr7aXxAAAAAElFTkSuQmCC" id="texture"> <-- texture </div> <h1>q3d / quickie 3d library</h1> <h2>feature</h2> <ul> <li>use html5 canvas</li> <li>oblique projection</li> <li>simple primitive (triangle, rectangle and circle)</li> <li>texture</li> </ul> BODY { background:#eee; } H1,H2 { font-size:100%; margin:0; } CANVAS { background:#fff; }

Tweet
QR code
Embed

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