Tuesday, September 13, 2011

Creating an Animated 3D WebGL Demonstration

Step 1. HTML

Here are html source code of our demo. As you can see – just empty page.
index.html

<!DOCTYPE html>
<html lang="en" >
<head>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/glMatrix-0.9.5.min.js"></script>
    <script type="text/javascript" src="js/webgl-utils.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <title>WebGL demonstration | Script Tutorials</title>
</head>
<body onload="initWebGl();">
    <div class="example">
        <h3>WebGL demonstration | Script Tutorials</h3>
        <canvas id="panel" width="500" height="333"></canvas>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

Step 2. CSS

Here are used CSS styles.
css/main.css

body {
    background:#eee;
    font-family:Verdana, Helvetica, Arial, sans-serif;
    margin:0;
    padding:0
}
.example {
    background:#fff;
    width:500px;
    font-size:80%;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    position:relative;
    -moz-border-radius: 3px;
    -webkit-border-radius:3px
}


Read more: Script-tutorials
QR: https://chart.googleapis.com/chart?chs=80x80&cht=qr&choe=UTF-8&chl=http://www.script-tutorials.com/making-3d-webgl-demonstration/

Posted via email from Jasper-Net