Canvas 3D

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<script type="text/javascript" src="http://peterned.home.xs4all.nl/3d/static/js/clay.min.js"></script><br /> <br /> <script type="text/javascript"> function DemoApp() { var stage = new Clay.Stage(640, 480, document.getElementById("canvas")); var world = stage.getWorld(); var camera = stage.getCamera(); camera.set(0, 0, 800); camera.setTarget(Clay.Vector.ZERO); var light = new Clay.Light(-2,-2, 1, 3, .5); light.setColor(255, 255, 255) world.addLight(light); stage.resizeTo(640, 480); var palet = [ new Clay.Material(37,47,51, 1, stage), new Clay.Material(65,92,79, 1, stage), new Clay.Material(134,156,128, 1, stage), new Clay.Material(147,194,204, 1, stage), new Clay.Material(206,234,238, 1, stage) ]; var rib = 256; var amount = 3; var offset = 266; function rand(range) { return Math.floor(Math.random() * range); }; for (var i=0; i<amount; i++) { for (var j=0; j<amount; j++) { for (var k=0; k<amount; k++) { var x = ((offset * i) - (offset * (amount-1))/2)*1.5, y = (offset * j) - (offset * (amount-1))/2, z = (offset * k) - (offset * (amount-1))/2; var m = palet[rand(palet.length)]; var cube = new Clay.Cube(x, y, z, 4, rib, rib, m); world.addShape(cube); } } } var flickr = []; var photos = document.getElementById("photos").getElementsByTagName("img"); for(var i=0; i<photos.length; i++) { var photo = photos[i]; var parent = photo.parentNode; if(/^a$/i.test(parent.nodeName)) { flickr.push( new Clay.Texture(photos[i].src, stage) ); } } var cameraTarget = Clay.Vector.ZERO; var t = 0, radius = 1200, slowMo = new Clay.Vector(20,20,20); stage.addEvent('click', function(e) { var poly = e.targetPolygon; var shape = e.targetShape; var rand = Math.floor(Math.random()*flickr.length); if(poly && shape) { poly.setMaterial(flickr[rand]); cameraTarget = shape; } }); stage.addEvent('enterframe', function(){ t += 0.01; var dif = cameraTarget.subtract(camera.target).divide(slowMo); camera.setTarget(camera.target.add(dif)) var position = new Clay.Vector( cameraTarget.x + (Math.sin(t) * radius), cameraTarget.y + (Math.cos(t) * radius/2), cameraTarget.z + (Math.cos(t) * radius) ); var move = position.subtract(camera).divide(slowMo); camera.moveBy(move); }); var lbi = new Image(); lbi.src = 'static/images/lostboys.png'; stage.addEvent('postrender', function(renderer){ try { renderer.context.drawImage(lbi,10,430); } catch (e) {} }); // run forest run! stage.run() } // init window.addEventListener('load', function(){ new DemoApp(); }, false); </script> <style type="text/css"> * { font-family:arial; font-size:11px; } h1 { color:red; font-size:150%; } .canvas3D { background:#f0f0f0; width:640px; height:480px; border:3px solid gray; } #photos { display:none; } </style>

6.Cari kode </body> letakkan kode javascript di bawah ini diatas nya:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>

Markah Html

<div id="canvas"> </div> <h1>Canvas in 3D</h1> <p> Click a surface for a random photo. Photos from <a href="http://flickr.com/">flickr</a>; <a href="http://www.flickr.com/groups/lost-boys/">http://www.flickr.com/groups/lost-boys/</a> </p> <p> Requires a browser with canvas support. See the <a href="http://lbi.lostboys.nl/blog/artikelen/canvas-in-full-3d/">Lost Boys blog</a> for more details.  </p> <div id="photos"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=10&display=random&size=m&layout=x&source=all_tag&tag=lbhomepage&user=76007934%40N00"></script> </div>

Canvas in 3D

Click a surface for a random photo. Photos from flickr; http://www.flickr.com/groups/lost-boys/

Requires a browser with canvas support. See the Lost Boys blog for more details.

Selamat Mencoba