q3dlib demo gct256 Follow 2010-08-30 15:06:56 License: MIT License Fork1 Fav8 View1136 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(); } 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> q3dlib demo BODY { background:#eee; } H1,H2 { font-size:100%; margin:0; } CANVAS { background:#fff; } 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; } use an iframe compat browser, deer 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 tags 3d canvas javascript Tweet twitter Tags 3d canvas javascript library oblique projection Favorite by paq semanticmap tkinjo clockmaker y3i12 canvastag miquael: 3d jscoder: 3dlibraryobliqueprojection Forked sort new page view favorite forked forked: q3dlib demo FSproduction.. 00 69views 67/3/16 3d canvas javascript