頂點索引陣列

package cc.openhome;

import java.awt.*;
import java.applet.*;

import static java.lang.Math.*;

class Point {
    final int x, y, z;
    Point(int x, int y, int z) {
        this.x = x;
        this.y = y;
        this.z = z;
    }
}

public class Demo extends Applet {
    private final static int L = 100;
    // 索引陣列
    private final static int V_INDEX[][] = {
        {0, 1, 2, 3}, {0, 7, 6, 1}, {4, 5, 6, 7},
        {2, 5, 4, 3}, {0, 3, 4, 7}, {1, 6, 5, 2}
    };
    // 立方體頂點
    private final static Point[] VETEX = {
        new Point(L, L, L), new Point(L, -L, L),
        new Point(L, -L, -L), new Point(L, L, -L),
        new Point(-L, L, -L), new Point(-L, -L, -L),
        new Point(-L, -L, L), new Point(-L, L, L)
    };
    // 視窗中心
    private int orgX;
    private int orgY;
    public void init() {
        super.init();
        setBackground(Color.black);
        setSize(640, 480);
        orgX = getWidth() / 2;
        orgY = getHeight() / 2;
    }
    
    public void paint(Graphics g) {
        g.setColor(Color.yellow);
        // 旋轉以斜角繪製圖形
        double ax = toRadians(30);
        double ay = toRadians(-30);
        
        double sinAx = sin(ax);
        double cosAx = cos(ax);
        double sinAy = sin(ay);
        double cosAy = cos(ay);
        
        int[] px = new int[4];
        int[] py = new int[4];
        for (int i = 0; i < 6; i++) {
            for (int j = 0; j < 4; j++) {
                // 利用索引陣列取出正確的頂點
                Point v = VETEX[V_INDEX[i][j]];
                // 旋轉以斜角繪製圖形
                px[j] = (int) (v.x * cosAy + v.z * sinAy + orgX);
                py[j] = (int) (v.y * cosAx -
                              (-v.x * sinAy + v.z * cosAy) * sinAx + orgY);
            }
            g.drawPolyline(px, py, 4);
        }
    }
}

以下是使用HTML5 Canvas的方式（如果瀏覽器支援HTML5 Canvas，例如最新版的Firexfox、Chrome、IE9等，可以直接將下面的內容存為HTML或按下檔名連結，直接載入瀏覽器執行觀看結果：

VetexArray-1.html

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=Big5" http-equiv="content-type">
        <script type="text/javascript">
            window.onload = function() {
                function toRadians(angle) {
                    return angle * Math.PI / 180;
                }
                
                var sin = Math.sin;
                var cos = Math.cos;
                var sqrt = Math.sqrt;
                
                function Point(x, y, z) {
                    this.x = x;
                    this.y = y;
                    this.z = z;
                }
                
                var V_INDEX = [
                    [0, 1, 2, 3], [0, 7, 6, 1], [4, 5, 6, 7],
                    [2, 5, 4, 3], [0, 3, 4, 7], [1, 6, 5, 2]
                ];
                
                var L = 100;
                var VETEX = [
                    new Point(L, L, L), new Point(L, -L, L),
                    new Point(L, -L, -L), new Point(L, L, -L),
                    new Point(-L, L, -L), new Point(-L, -L, -L),
                    new Point(-L, -L, L), new Point(-L, L, L)
                ];

                // 旋轉以斜角繪製圖形
                var ax = toRadians(30);
                var ay = toRadians(-30);
        
                var sinAx = sin(ax);
                var cosAx = cos(ax);
                var sinAy = sin(ay);
                var cosAy = cos(ay);
        
                var px = [];
                var py = [];
                
                var canvas1 = document.getElementById('canvas1');
                
                var orgX = canvas1.width / 2;
                var orgY = canvas1.height / 2;
                
                var context = canvas1.getContext('2d');
                context.beginPath();
                for(var i = 0; i < 6; i++) {
                    for (var j = 0; j < 4; j++) {
                        // 利用索引陣列取出正確的頂點
                        var v = VETEX[V_INDEX[i][j]];
                        // 旋轉以斜角繪製圖形
                        px[j] = parseInt(v.x * cosAy + v.z * sinAy + orgX);
                        py[j] = parseInt(v.y * cosAx -
                              (-v.x * sinAy + v.z * cosAy) * sinAx + orgY);
                    }
                    context.moveTo(px[0], py[0]);
                    for(var k = 1; k < 4; k++) {
                        context.lineTo(px[k], py[k]);
                    }
                }
                context.stroke();
                context.closePath();
            };
        </script>
    </head>
    <body>       
        <canvas id="canvas1" width="640" height="480"></canvas>
    </body>
</html>

在Firefox下的效果如下：