<!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> 	     	    <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编程利器----矩阵以及矩阵在计算机图形学中的应用！

HTML5版3D实验三：JavaScript玩转3D粒子系统

八.总结及预告