一.簡介

圓錐，數學領域術語，有兩種定義。

解析幾何定義：圓錐面和一個截它的平面（滿足交線為圓）組成的空間幾何圖形叫圓錐。

立體幾何定義：以直角三角形的一條直角邊所在直線為旋轉軸，其余兩邊旋轉形成的面所圍成的旋轉體叫做圓錐。該直角邊叫圓錐的軸 。

 

二.圓錐模擬

通過以上兩個定義，我可以模擬出圓錐上所有的點：

JavaScript Code復制內容到剪貼板

1. var pointPositions = [];  
2. for (var i = -100; i < 200; i += 10) {  
3.     var xTemp = getRandomNumber(-i, i);  
4.     var zTemp = Math.sqrt(Math.abs(i * i - xTemp * xTemp));  
5.     pointPositions.push(new Vector3(xTemp, i, zTemp));  
6. }  

 

i 既是h,又是半徑r。

這個時候，我們生成的 Z都是大於零的，不過沒有關系，我們等下可以通過旋轉來補齊所有的點。

 

 

三.旋轉與投影

JavaScript Code復制內容到剪貼板

1. //旋轉  
2.     function rotate(angle) {  
3.        
4.         for (var i = 0; i < pointPositions.length; i++) {  
5.             var tempX = pointPositions[i].x;  
6.             var tempZ = pointPositions[i].z;  
7.             pointPositions[i].x = pointPositions[i].x * Math.cos(angle) - pointPositions[i].z * Math.sin(angle);  
8.             pointPositions[i].z = pointPositions[i].z * Math.cos(angle) + tempX * Math.sin(angle);  
9.         }  
10.     }  
11.     //投影  
12.     function projection(v) {  
13.         var v1 = new Vector3();  
14.         v1.x = v.x * distance / Math.abs(cameraPosition.z - v.z);  
15.         v1.y = v.y * distance / Math.abs(cameraPosition.z - v.z);  
16.         v1.z = v.z;  
17.         return v1;  
18.     }  

四.動畫

JavaScript Code復制內容到剪貼板

1. var currentAngle = 0;  
2.     var roundAsync = eval(JScex.compile("async", function () {  
3.         while (true) {  
4.             pointPositionsForShow.length = 0;  
5.             currentAngle += 0.1;  
6.             rotate(degToRad(currentAngle));  
7.             PositionsProjection();  
8.             for (var i = 0; i < pointPositionsForShow.length; i++) {  
9.                 cxt.fillStyle = randomColor();  
10.                 cxt.beginPath();  
11.                 if (pointPositionsForShow[i].z > 0) cxt.globalAlpha = 1;  
12.                 if (pointPositionsForShow[i].z < 0) cxt.globalAlpha = 0.1;  
13.                 cxt.arc(centreOfCirclePosition.x + pointPositionsForShow[i].x, centreOfCirclePosition.x + pointPositionsForShow[i].y, distance / Math.abs(cameraPosition.z - pointPositionsForShow[i].z), 0, Math.PI * 2, true);  
14.                 cxt.closePath();  
15.                 cxt.fill();  
16.             }  
17.             $await(JScex.Async.sleep(50));  
18.         }  
19.     }))