diff --git a/First_Cube/First_Cube.html b/First_Cube/First_Cube.html
new file mode 100644
index 0000000..b66f63e
--- /dev/null
+++ b/First_Cube/First_Cube.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>First Cube</title>
+</head>
+<body>
+<button onclick="run()" style="position: fixed; top: 0px; right: 0px;">start</button>
+<canvas id="fc-cv-0" style="z-index: 1; position: fixed; top: 0px; left: 0px"></canvas>
+<canvas id="fc-cv-1" style="z-index: 0; position: fixed; top: 0px; left: 0px"></canvas>
+</body>
+<script>
+// 相似的注释在First_Cube.py里面都有,就不写了
+var points = [[-1,1,-1],
+    [1,1,-1],
+    [-1,-1,-1],
+    [1,-1,-1],
+    [-1,1,1],
+    [1,1,1],
+    [-1,-1,1],
+    [1,-1,1]]
+var pit   = [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]
+var angle = 0
+var speed = 1
+var fps   = 60
+var dist  = [5,4]
+var st    = 1/fps*1000
+var apf   = Math.PI * speed / fps
+// init canvas
+var cvs = [document.getElementById('fc-cv-0'),document.getElementById('fc-cv-1')]
+for(i in cvs){
+    cvs[i].width = 800;
+    cvs[i].height = 600;
+}
+var ctx = [cvs[0].getContext('2d'),cvs[1].getContext('2d')]
+var offset = [400,600]
+showingCv = 0
+hiddenCv  = 1
+
+function drawLine(x1,y1,x2,y2,ctx) {
+    ctx.beginPath()
+    ctx.lineWidth='5'
+    ctx.color='black'
+    ctx.moveTo(x1,y1)
+    ctx.lineTo(x2,y2)
+    ctx.stroke()
+}
+
+function rotate() {
+    angle += apf
+    if (angle > 2*Math.PI){
+        angle -= 2*Math.PI
+    }
+    var radius = Math.sqrt(2)
+    var center = [0,0]
+    pairs = [[0,4,-Math.PI/4], [1,5,Math.PI/4], [2,6,-Math.PI*3/4], [3,7,Math.PI*3/4]]
+    for (pair in pairs){
+        center = [radius*Math.sin(angle+pairs[pair][2]),radius*Math.cos(angle+pairs[pair][2])]
+        // x
+        points[pairs[pair][0]][0] = center[0]
+        points[pairs[pair][1]][0] = center[0]
+        // y
+        points[pairs[pair][0]][1] = center[1]
+        points[pairs[pair][1]][1] = center[1]
+    }
+}
+
+function draw() {
+    for (pt in pit){
+        rate = dist[1]/(dist[0]+points[pt][1])
+        scale = 200
+        pit[pt][0] = points[pt][0]*rate*scale
+        pit[pt][1] = points[pt][2]*rate*scale
+    }
+    ctx[hiddenCv].clearRect(0, 0, cvs[hiddenCv].width, cvs[hiddenCv].height)
+    var dcps = [[1,[0,3,5]],[2,[0,3,6]],[4,[0,5,6]], [7,[3,5,6]]]
+    for (t in dcps){
+        var dcp=dcps[t][0]
+        var nps=dcps[t][1]
+        for (np in nps){
+            drawLine(pit[dcp][0]+400,pit[dcp][1]+300,pit[nps[np]][0]+400,pit[nps[np]][1]+300,ctx[hiddenCv])
+        }
+    }
+    cvs[showingCv].style.zIndex = 0
+    cvs[hiddenCv].style.zIndex = 1
+    showingCv,hiddenCv = hiddenCv,showingCv
+}
+
+function run() {
+    document.intervals = []
+    t = setInterval(rotate,st)
+    document.intervals.push(t)
+    t = setInterval(draw,st)
+    document.intervals.push(t)
+}
+</script>
+</html>
\ No newline at end of file
