<!DOCTYPE html> <html XMLns="http://www.w3.org/1999/xHtml"> <head> <title></title> </head> <body> <script src="http://files.cnblogs.com/iamzhanglei/easel.js" type="text/javascript"></script> <script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/uglifyjs-parser.js"></script> <script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.js"></script> <script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.builderBase.js"></script> <script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.async.JS"></script> <!--[if IE]> <script language="javascript" type="text/Javascript" src="http://files.cnblogs.com/zhanglei644213943/json2.JS"></script> <script language="Javascript"> Jscex.config.codeGenerator = function (code) { return "false || " + code; } </script> <![endif]--> <script>JScex.config.codeGenerator = function (code) { return "false || " + code; } </script> <div style="display: none"> <img alt="" src="/uploads/allimg/111101/15264aS4-1.png" /> </div> <div style="border-bottom: #222 15px solid; border-left: #222 15px solid; background-color: #111; color: #ccc; border-top: #222 15px solid; border-right: #222 15px solid" class="canvasHolder"> <canvas id="testCanvas" height="580" width="980">你的<a href='http://www.html5china.com/help/browser.html' title='浏覽器' target='_blank'><u>浏覽器</u></a>不支持<a href='http://www.html5china.com' title='html5' target='_blank'><u>html5</u></a>,請用谷歌 火狐等<a href='http://www.Html5china.com/help/browser.html' title='浏覽器' target='_blank'><u>浏覽器</u></a></canvas></div> <script> Vector3 = function (x, y, z) { this.x = x || 0; this.y = y || 0; this.z = z || 0; }; var canvas; var stage; var tempStar; var centreOfCirclePosition = new Vector3(300, 300, 0); var cameraPosition = new Vector3(300, 300, 400); var r = 250; var distance = 300; var starPositions = []; var j = -1; for (var i = 0; i < 240; i++) { var xTemp = getRandomNumber(-250, 250); var yTemp = getRandomNumber(-250, 250); j *= -1; if (xTemp * xTemp + yTemp * yTemp <= r * r) { var zTemp = j * Math.sqrt(Math.abs(r * r - xTemp * xTemp - yTemp * yTemp)); starPositions.push(new Vector3(xTemp, yTemp, zTemp)); } } var starPositionsForShow = []; function getRandomNumber(min, max) { return (min + Math.floor(Math.random() * (max - min + 1))) } function PositionsProjection() { for (var i = 0; i < starPositions.length; i++) { var tempV = projection(starPositions[i]); starPositionsForShow.push(tempV); } } function degToRad(a) { return (a / (360 / (2 * Math.PI))); } var currentAngle = 0; var roundAsync = eval(Jscex.compile("async", function () { while (true) { stage.removeAllChildren(); starPositionsForShow.length = 0; currentAngle += 0.0005; rotate(degToRad(currentAngle)); PositionsProjection(); for (var i = 0; i < starPositionsForShow.length; i++) { tempStar = new Bitmap("/uploads/allimg/111101/15264aS4-1.png"); tempStar.x = centreOfCirclePosition.x + starPositionsForShow[i].x; tempStar.y = centreOfCirclePosition.x + starPositionsForShow[i].y; tempStar.scaleX = tempStar.scaleY = 0.5 * distance / Math.abs(cameraPosition.z - starPositionsForShow[i].z); if (starPositionsForShow[i].z > 50) tempStar.alpha = 1; if (starPositionsForShow[i].z < 50) tempStar.alpha = 0.5; stage.addChild(tempStar); } stage.update(); $await(JScex.Async.sleep(50)); } })) function rotate(angle) { for (var i = 0; i < starPositions.length; i++) { var tempX = starPositions[i].x; var tempZ = starPositions[i].z; starPositions[i].x = starPositions[i].x * Math.cos(angle) - starPositions[i].z * Math.sin(angle); starPositions[i].z = starPositions[i].z * Math.cos(angle) + tempX * Math.sin(angle); } } function PositionsProjection() { for (var i = 0; i < starPositions.length; i++) { var tempV = projection(starPositions[i]); starPositionsForShow.push(tempV); } } function projection(v) { var v1 = new Vector3(); v1.x = v.x * distance / Math.abs(cameraPosition.z - v.z); v1.y = v.y * distance / Math.abs(cameraPosition.z - v.z); v1.z = v.z; return v1; } function init() { PositionsProjection(); canvas = document.getElementById("testCanvas"); stage = new Stage(canvas); Ticker.addListener(stage); roundAsync().start(); } init(); </script> </body> </Html>
提示:可以修改後運行.
八.總結及預告
在3D編程的中，我們利用向量與矩陣的運算可以簡化空間坐標變換的計算，比如求出某立方體繞任意軸旋轉後的坐標，再比如計算旋轉+縮放+切變+投影後的坐標變換，如果拋棄矩陣，將陷入大量的復雜計算當中。利用齊次坐標技術來描述空間各點的坐標，用4*4的矩陣來解決空間各點的變換，已經成了計算機圖形學的一個標准。在以後，我們將利用和介紹3D編程利器----矩陣以及矩陣在計算機圖形學中的應用！