正三百二十面体 球 3D|320 Polyhedrons Sphere 3D|HTML5

 正三百二十面体 球 3D|320 Polyhedrons Sphere 3D|HTML5

正三百二十面体 球 3D|320 Polyhedrons Sphere 3D|HTML5(HTML5, JavaScript, CSS3) : デモ

正三百二十面体 球 3D|320 Polyhedrons Sphere 3D|HTML5(HTML5, JavaScript, CSS3) : ZIPファイル(7kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8" />
        <title>320 Polyhedrons 3D</title>
        <link href="css/base.css" rel="stylesheet" type="text/css">
        <script src="js/devicecheck.js"></script>
        <script src="js/base.js"></script>
    </head>
    <body>
        <div id="contents">
            <canvas id="canvas" width="275" height="275"></canvas>
        </div>
    </body>
</html>

2.CSS

@charset "utf-8";
   
body
{
    margin: 0;
    padding: 0;
    background-color: #fff;
}
   
#contents
{
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height: 275px;
    border: 1px solid #000;
    overflow:hidden;
}
   
#canvas
{
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height: 275px;
}

3.JavaScript

base.js

window.addEventListener("load", init, false);
   
function init()
{
    var offsetX = 0,
    offsetY = 0,
    ctx,
    points = [],
    triangles = [],
    fl = 250,
    vpX = 0,
    vpY = 0,
    mouseX = 0,
    mouseY = 0,
    buttonDown,
    buttonMove,
    buttonUp,
    light,
    _36 = 36 * Math.PI / 180,
    _72 = 72 * Math.PI / 180,
    _54 = 54 * Math.PI / 180,
    ratio = 150,
    a = 1 / Math.sqrt(5),
    b = (1 - a) * 0.5,
    c = (1 + a) * 0.5,
    d = Math.sqrt(b),
    e = Math.sqrt(c),
    pointsOthers = [],
    pointNum = [],
    face20P = [],
    minus = 0,
    theContents;
      
    theContents = document.getElementById("contents");
    offsetX = (theContents.currentStyle || document.defaultView.getComputedStyle(theContents,'')).width;
    offsetX = Number(offsetX.replace('px', ''));
   
    offsetY = (theContents.currentStyle || document.defaultView.getComputedStyle(theContents,'')).height;
    offsetY = Number(offsetY.replace('px', ''));
      
    vpX = offsetX / 2;
    vpY = offsetY / 2;
     
    ctx = document.getElementById('canvas').getContext("2d");
      
    //ボタンタイプ
    if(g_mobiledevice === true)
    {
        buttonDown = 'touchstart';
        buttonMove = 'touchmove';
        buttonUp = 'touchend';
    }
    else
    {
        buttonDown = 'mousedown';
        buttonMove = 'mousemove';
        buttonUp = 'mouseup';
    }
      
    document.getElementById('canvas').addEventListener('touchstart', function() 
    {
        event.preventDefault();
    });
    document.getElementById('canvas').addEventListener('touchmove', function() 
    {
        event.preventDefault();
    });
    document.getElementById('canvas').addEventListener('touchend', function() 
    {
        event.preventDefault();
    });
      
    document.getElementById('canvas').addEventListener(buttonMove, mouseMoveHandler, false);
     
    var row0 = [ 0.723607, 0.447214, -0.525731];
    var row1 = [ 0.723607, 0.447214,  0.525731];
    var row2 = [-0.276393, 0.447214,  0.850651];
    var row3 = [ 0,        1,         0];
    var row4 = [-0.894427, 0.447214,  0];
    var row5 = [-0.276393, 0.447214, -0.850651];
    var row6 = [ 0.850651, 0.525731,  0];
    var row7 = [ 0.425325, 0.850651, -0.309017];
    var row8 = [ 0.262866, 0.525731, -0.809017];
    var row9 = [ 0.587785, 0,        -0.809017];
     
    var row10 = [ 0.951057, 0,        -0.309017];
    var row11 = [ 0.262866, 0.525731,  0.809017];
    var row12 = [ 0.425325, 0.850651,  0.309017];
    var row13 = [ 0.951057, 0,         0.309017];
    var row14 = [ 0.587785, 0,         0.809017];
    var row15 = [-0.16246,  0.850651,  0.5];
    var row16 = [-0.688191, 0.525731,  0.5];
    var row17 = [ 0,        0,         1];
    var row18 = [-0.587785, 0,         0.809017];
    var row19 = [-0.525731, 0.850651,  0];
     
    var row20 = [-0.16246,  0.850651, -0.5];
    var row21 = [-0.688191, 0.525731, -0.5];
    var row22 = [-0.951057, 0,        -0.309017];
    var row23 = [-0.951057, 0,         0.309017];
    var row24 = [-0.587785, 0,        -0.809017];
    var row25 = [ 0,        0,        -1];
    var row26 = [-0.723607,-0.447214,  0.525731];
    var row27 = [-0.723607,-0.447214, -0.525731];
    var row28 = [ 0.276393,-0.447214, -0.850651];
    var row29 = [ 0,       -1,         0];
     
    var row30 = [ 0.894427,-0.447214,  0 ];
    var row31 = [ 0.276393,-0.447214,  0.850651];
    var row32 = [-0.850651,-0.525731,  0];
    var row33 = [-0.425325,-0.850651,  0.309017];
    var row34 = [-0.262866,-0.525731,  0.809017];
    var row35 = [-0.262866,-0.525731, -0.809017];
    var row36 = [-0.425325,-0.850651, -0.309017];
    var row37 = [ 0.16246, -0.850651, -0.5];
    var row38 = [ 0.688191,-0.525731, -0.5];
    var row39 = [ 0.525731,-0.850651,  0];
     
    var row40 = [ 0.16246, -0.850651,  0.5];
    var row41 = [ 0.688191,-0.525731,  0.5];
     
    face20P.push(row0, row1, row2, row3, row4);
    face20P.push(row5, row6, row7, row8, row9);
    face20P.push(row10, row11, row12, row13, row14);
    face20P.push(row15, row16, row17, row18, row19);
    face20P.push(row20, row21, row22, row23, row24);
    face20P.push(row25, row26, row27, row28, row29);
    face20P.push(row30, row31, row32, row33, row34);
    face20P.push(row35, row36, row37, row38, row39);
    face20P.push(row40, row41);
     
    var cX = 0,
    cY = 0,
    cZ = 200;
    Point3D(row0[0], row0[1], row0[2], vpX, vpY, cX, cY, cZ, 0);
    Point3D(row1[0], row1[1], row1[2], vpX, vpY, cX, cY, cZ, 1);
    Point3D(row2[0], row2[1], row2[2], vpX, vpY, cX, cY, cZ, 2);
    Point3D(row3[0], row3[1], row3[2], vpX, vpY, cX, cY, cZ, 3);
    Point3D(row4[0], row4[1], row4[2], vpX, vpY, cX, cY, cZ, 4);
    Point3D(row5[0], row5[1], row5[2], vpX, vpY, cX, cY, cZ, 5);
    Point3D(row6[0], row6[1], row6[2], vpX, vpY, cX, cY, cZ, 6);
    Point3D(row7[0], row7[1], row7[2], vpX, vpY, cX, cY, cZ, 7);
    Point3D(row8[0], row8[1], row8[2], vpX, vpY, cX, cY, cZ, 8);
    Point3D(row9[0], row9[1], row9[2], vpX, vpY, cX, cY, cZ, 9);
     
    Point3D(row10[0], row10[1], row10[2], vpX, vpY, cX, cY, cZ, 10);
    Point3D(row11[0], row11[1], row11[2], vpX, vpY, cX, cY, cZ, 11);
    Point3D(row12[0], row12[1], row12[2], vpX, vpY, cX, cY, cZ, 12);
    Point3D(row13[0], row13[1], row13[2], vpX, vpY, cX, cY, cZ, 13);
    Point3D(row14[0], row14[1], row14[2], vpX, vpY, cX, cY, cZ, 14);
    Point3D(row15[0], row15[1], row15[2], vpX, vpY, cX, cY, cZ, 15);
    Point3D(row16[0], row16[1], row16[2], vpX, vpY, cX, cY, cZ, 16);
    Point3D(row17[0], row17[1], row17[2], vpX, vpY, cX, cY, cZ, 17);
    Point3D(row18[0], row18[1], row18[2], vpX, vpY, cX, cY, cZ, 18);
    Point3D(row19[0], row19[1], row19[2], vpX, vpY, cX, cY, cZ, 19);
     
    Point3D(row20[0], row20[1], row20[2], vpX, vpY, cX, cY, cZ, 20);
    Point3D(row21[0], row21[1], row21[2], vpX, vpY, cX, cY, cZ, 21);
    Point3D(row22[0], row22[1], row22[2], vpX, vpY, cX, cY, cZ, 22);
    Point3D(row23[0], row23[1], row23[2], vpX, vpY, cX, cY, cZ, 23);
    Point3D(row24[0], row24[1], row24[2], vpX, vpY, cX, cY, cZ, 24);
    Point3D(row25[0], row25[1], row25[2], vpX, vpY, cX, cY, cZ, 25);
    Point3D(row26[0], row26[1], row26[2], vpX, vpY, cX, cY, cZ, 26);
    Point3D(row27[0], row27[1], row27[2], vpX, vpY, cX, cY, cZ, 27);
    Point3D(row28[0], row28[1], row28[2], vpX, vpY, cX, cY, cZ, 28);
    Point3D(row29[0], row29[1], row29[2], vpX, vpY, cX, cY, cZ, 29);
     
    Point3D(row30[0], row30[1], row30[2], vpX, vpY, cX, cY, cZ, 30);
    Point3D(row31[0], row31[1], row31[2], vpX, vpY, cX, cY, cZ, 31);
    Point3D(row32[0], row32[1], row32[2], vpX, vpY, cX, cY, cZ, 32);
    Point3D(row33[0], row33[1], row33[2], vpX, vpY, cX, cY, cZ, 33);
    Point3D(row34[0], row34[1], row34[2], vpX, vpY, cX, cY, cZ, 34);
    Point3D(row35[0], row35[1], row35[2], vpX, vpY, cX, cY, cZ, 35);
    Point3D(row36[0], row36[1], row36[2], vpX, vpY, cX, cY, cZ, 36);
    Point3D(row37[0], row37[1], row37[2], vpX, vpY, cX, cY, cZ, 37);
    Point3D(row38[0], row38[1], row38[2], vpX, vpY, cX, cY, cZ, 38);
    Point3D(row39[0], row39[1], row39[2], vpX, vpY, cX, cY, cZ, 39);
     
    Point3D(row40[0], row40[1], row40[2], vpX, vpY, cX, cY, cZ, 40);
    Point3D(row41[0], row41[1], row41[2], vpX, vpY, cX, cY, cZ, 41);
     
    pointNum.push(0, 6, 7,
                  3,7,12,
                  1,12,6,
                  7,6,12,
                  0,7,8,
                  5,8,20,
                  3,20,7,
                  8,7,20,
                  0,8,9,
                  5,25,8,
                  9,8,25,
                  0,9,10,
                  0,10,6,
                  1,6,13,
                  6,10,13,
                  1,11,12,
                  3,12,15,
                  2,15,11,
                  12,11,15,
                  2,16,15,
                  3,15,19,
                  4,19,16,
                  15,16,19,
                  3,19,20,
                  5,20,21,
                  4,21,19,
                  20,19,21,
                  4,22,21,
                  5,21,24,
                  21,22,24,
                  5,24,25,
                  1,13,14,
                  1,14,11,
                  2,11,17,
                  14,17,11,
                  2,18,16,
                  4,16,23,
                  16,18,23,
                  4,23,22,
                  2,17,18,
                  26,33,32,
                  29,36,33,
                  27,32,36,
                  33,36,32,
                  26,34,33,
                  31,40,34,
                  29,33,40,
                  34,40,33,
                  26,18,34,
                  31,34,17,
                  18,17,34,
                  26,23,18,
                  26,32,23,
                  27,22,32,
                  32,22,23,
                  27,36,35,
                  29,37,36,
                  28,35,37,
                  36,37,35,
                  28,37,38,
                  29,39,37,
                  30,38,39,
                  37,39,38,
                  29,40,39,
                  31,41,40,
                  30,39,41,
                  40,41,39,
                  30,41,13,
                  31,14,41,
                  41,14,13,
                  31,17,14,
                  27,24,22,
                  27,35,24,
                  28,25,35,
                  24,35,25,
                  28,38,9,
                  30,10,38,
                  38,10,9,
                  30,13,10,
                  28,9,25);
                   
    for(var i = 0; i < pointNum.length; i++)
    {
        if(i % 3 == 2)
        {
            var x0 = (face20P[pointNum[i]][0] + face20P[pointNum[i-2]][0]) / 2;
            var y0 = (face20P[pointNum[i]][1] + face20P[pointNum[i-2]][1]) / 2;
            var z0 = (face20P[pointNum[i]][2] + face20P[pointNum[i-2]][2]) / 2;
        }
        else
        {
            x0 = (face20P[pointNum[i]][0] + face20P[pointNum[i+1]][0]) / 2;
            y0 = (face20P[pointNum[i]][1] + face20P[pointNum[i+1]][1]) / 2;
            z0 = (face20P[pointNum[i]][2] + face20P[pointNum[i+1]][2]) / 2;
        }
         
        //aの0.5乗とはルートaのこと
        var M = (x0 * x0) + (y0 * y0) + (z0 * z0);
        var X = Math.sqrt((x0 * x0) / M);
        var Y = Math.sqrt((y0 * y0) / M);
        var Z = Math.sqrt((z0 * z0) / M);
         
        if(x0 < 0)
        {
            X *= -1;
        }
        if(y0 < 0)
        {
            Y *= -1;
        }
        if(z0 < 0)
        {
            Z *= -1;
        }
         
        pointsOthers3D(X, Y, Z, vpX, vpY, cX, cY, cZ, i);
    }
     
    for(var i = 0; i < 317; i++)
    {
        var numA = i + 1;
        var numB = i + 2;
         
        if(i == 0)
        {
            Triangle(points[pointNum[i]], pointsOthers[i], pointsOthers[numB], 256, 0, 0, i);
            Triangle(pointsOthers[i], pointsOthers[numA], pointsOthers[numB], 256, 0, 0, (i+1));
            Triangle(pointsOthers[i], points[pointNum[numA]], pointsOthers[numA], 256, 0, 0, (i+2));
            Triangle(pointsOthers[numB], pointsOthers[numA], points[pointNum[numB]], 256, 0, 0, (i+3));
        }
        else
        if(i == 4)
        {
            minus = -1;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 8)
        {
            minus = -2;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 12)
        {
            minus = -3;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 16)
        {
            minus = -4;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 20)
        {
            minus = -5;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 24)
        {
            minus = -6;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 28)
        {
            minus = -7;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 32)
        {
            minus = -8;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 36)
        {
            minus = -9;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 40)
        {
            minus = -10;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 44)
        {
            minus = -11;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 48)
        {
            minus = -12;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 52)
        {
            minus = -13;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 56)
        {
            minus = -14;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 60)
        {
            minus = -15;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 64)
        {
            minus = -16;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 68)
        {
            minus = -17;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 72)
        {
            minus = -18;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 76)
        {
            minus = -19;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 80)
        {
            minus = -20;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 84)
        {
            minus = -21;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 88)
        {
            minus = -22;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 92)
        {
            minus = -23;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 96)
        {
            minus = -24;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 100)
        {
            minus = -25;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 104)
        {
            minus = -26;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 108)
        {
            minus = -27;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 112)
        {
            minus = -28;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 116)
        {
            minus = -29;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 120)
        {
            minus = -30;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 124)
        {
            minus = -31;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 128)
        {
            minus = -32;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 132)
        {
            minus = -33;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 136)
        {
            minus = -34;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 140)
        {
            minus = -35;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 144)
        {
            minus = -36;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 148)
        {
            minus = -37;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 152)
        {
            minus = -38;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 156)
        {
            minus = -39;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 160)
        {
            minus = -40;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 164)
        {
            minus = -41;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 168)
        {
            minus = -42;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 172)
        {
            minus = -43;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 176)
        {
            minus = -44;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 180)
        {
            minus = -45;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 184)
        {
            minus = -46;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 188)
        {
            minus = -47;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 192)
        {
            minus = -48;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 196)
        {
            minus = -49;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 200)
        {
            minus = -50;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 204)
        {
            minus = -51;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 208)
        {
            minus = -52;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 212)
        {
            minus = -53;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 216)
        {
            minus = -54;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 220)
        {
            minus = -55;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 224)
        {
            minus = -56;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 228)
        {
            minus = -57;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 232)
        {
            minus = -58;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 236)
        {
            minus = -59;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 240)
        {
            minus = -60;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 244)
        {
            minus = -61;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 248)
        {
            minus = -62;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 252)
        {
            minus = -63;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 256)
        {
            minus = -64;
            tri(i, minus, numA, numB);
        }
         
        else
        if(i == 260)
        {
            minus = -65;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 264)
        {
            minus = -66;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 268)
        {
            minus = -67;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 272)
        {
            minus = -68;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 276)
        {
            minus = -69;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 280)
        {
            minus = -70;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 284)
        {
            minus = -71;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 288)
        {
            minus = -72;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 292)
        {
            minus = -73;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 296)
        {
            minus = -74;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 300)
        {
            minus = -75;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 304)
        {
            minus = -76;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 308)
        {
            minus = -77;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 312)
        {
            minus = -78;
            tri(i, minus, numA, numB);
        }
        else
        if(i == 316)
        {
            minus = -79;
            tri(i, minus, numA, numB);
        }
         
    }
     
    function tri(i, minus, numA, numB)
    {
        Triangle(points[pointNum[i+minus]], pointsOthers[i+minus], pointsOthers[numB+minus], 256, 0, 0, i);
        Triangle(pointsOthers[i+minus], pointsOthers[numA+minus], pointsOthers[numB+minus], 256, 0, 0, (i+1));
        Triangle(pointsOthers[i+minus], points[pointNum[numA+minus]], pointsOthers[numA+minus], 256, 0, 0, (i+2));
        Triangle(pointsOthers[numB+minus], pointsOthers[numA+minus], points[pointNum[numB+minus]], 256, 0, 0, (i+3));
    }
     
    Light();
    setAnimation();
     
    function Point3D(x, y, z, vpX, vpY, cX, cY, cZ, i)
    {
        points[i] = 
        {
            x:ratio * x, y:ratio * y, z:ratio * z, 
            vpX:vpX, vpY:vpY, 
            cX:cX, cY:cY, cZ:cZ, 
            angleX:0, angleY:0, angleZ:0,
            screenX:0,screenY:0
        };
    }
     
    function pointsOthers3D(x, y, z, vpX, vpY, cX, cY, cZ, i)
    {
        pointsOthers[i] = 
        {
            x:ratio * x, y:ratio * y, z:ratio * z, 
            vpX:vpX, vpY:vpY, 
            cX:cX, cY:cY, cZ:cZ, 
            angleX:0, angleY:0, angleZ:0,
            screenX:0,screenY:0
        };
    }
     
    function Triangle(pointA, pointB, pointC, r, g, b, i)
    {
        var zpos = depth(pointA, pointB, pointC);
        triangles[i] = {pointA:pointA, pointB:pointB, pointC:pointC, r:r, g:g, b:b, zpos:zpos};
    }
     
    function draw(pointA, pointB, pointC, r, g, b)
    {
        if (isBackFace(pointA, pointB, pointC))
        {
            return;
        }
         
        var colorR = getAdjustedColor(pointA, pointB, pointC, r, g, b).red;
        var colorG = getAdjustedColor(pointA, pointB, pointC, r, g, b).green;
        var colorB = getAdjustedColor(pointA, pointB, pointC, r, g, b).blue;
         
        ctx.fillStyle = "rgba(" + colorR + "," + colorG + "," + colorB + "," + 1 + ")";  
        ctx.strokeStyle = "rgba(" + colorR + "," + colorG + "," + colorB + "," + 1 + ")";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(pointA.screenX, pointA.screenY);
        ctx.lineTo(pointB.screenX, pointB.screenY);
        ctx.lineTo(pointC.screenX, pointC.screenY);
        ctx.lineTo(pointA.screenX, pointA.screenY);
        ctx.fill();
        ctx.stroke();
    }
     
    /*
     * 光源設定
     */
    function Light()
    {
        light = {};
        light.x = -100,
        light.y = -100,
        light.z = -100,
        light.brightness = 1;
    }
     
    /*
     * 面の照明調整
     */
    function getAdjustedColor(pointA, pointB, pointC, r, g, b)
    {
        var red = r;
        var green = g;
        var blue = b;
         
        var lightFactor = getLightFactor(pointA, pointB, pointC);
         
        red *= lightFactor;
        green *= lightFactor;
        blue *= lightFactor;
         
        red = Math.round(red);
        green = Math.round(green);
        blue = Math.round(blue);
         
        return {red:red, green:green, blue:blue};
    }
     
    /*
     * 光線の角度
     */
    function getLightFactor(pointA, pointB, pointC)
    {
        var ab = {};
        ab.x = pointA.x - pointB.x;
        ab.y = pointA.y - pointB.y;
        ab.z = pointA.z - pointB.z;
         
        var bc = {};
        bc.x = pointB.x - pointC.x;
        bc.y = pointB.y - pointC.y;
        bc.z = pointB.z - pointC.z;
         
        var norm = {};
        norm.x = (ab.y * bc.z) - (ab.z * bc.y);
        norm.y = -((ab.x * bc.z) - (ab.z * bc.x));
        norm.z = (ab.x * bc.y) - (ab.y * bc.x);
         
        var dotProd = norm.x * light.x +
        norm.y * light.y +
        norm.z * light.z;
         
        var normMag = Math.sqrt(norm.x * norm.x +
        norm.y * norm.y + norm.z * norm.z);
         
        var lightMag = Math.sqrt(light.x * light.x +
        light.y * light.y +
        light.z * light.z);
         
        return (Math.acos(dotProd/(normMag*lightMag))/Math.PI) * light.brightness;
    }
     
    /*
     * 隠面消去
     */
    function isBackFace(pointA, pointB, pointC)
    {
        var cax = pointC.screenX - pointA.screenX;
        var cay = pointC.screenY - pointA.screenY;
        var bcx = pointB.screenX - pointC.screenX;
        var bcy = pointB.screenY - pointC.screenY;
        return cax * bcy > cay * bcx;
    }
     
    function setAnimation()
    {
        animation();
        requestAnimationFrame(setAnimation);
    }
      
    function animation()
    {
        var angleX = (mouseY - vpY) * 0.001;
        var angleY = (mouseX - vpX) * 0.001;
         
        for(var i = 0; i < points.length; i++)
        {
            var point = points[i];
             
            setRotateX(point, angleX);
            setScreenX(point);
            setRotateY(point, angleY);
            setScreenY(point);
        }
         
        for (var i = 0; i < pointsOthers.length; i++)
        {
            var pointOther = pointsOthers[i];
            setRotateX(pointOther, angleX);
            setScreenX(pointOther);
            setRotateY(pointOther, angleY);
            setScreenY(pointOther);
        }
         
        ctx.clearRect(0, 0, 300, 300);
         
        for(i = 0; i < triangles.length; i++)
        {
            triangles[i].zpos = depth(triangles[i].pointA, triangles[i].pointB, triangles[i].pointC);
            draw(triangles[i].pointA, triangles[i].pointB, triangles[i].pointC, triangles[i].r, triangles[i].g, triangles[i].b);
        }
        sortZ();
    }
     
    function setScreenX(point)
    {
        var scale = fl / (fl + point.z + point.cZ);
        point.screenX = point.vpX + (point.cX + point.x) * scale;
    }
     
    function setScreenY(point)
    {
        var scale = fl / (fl + point.z + point.cZ);
        point.screenY = point.vpY + (point.cY + point.y) * scale;
    }
     
    function setRotateX(point, angleX)
    {
        point.angleX = angleX;
         
        var cosX = Math.cos(point.angleX);
        var sinX = Math.sin(point.angleX);
         
        var y1 = point.y * cosX - point.z * sinX;
        var z1 = point.z * cosX + point.y * sinX;
         
        point.y = y1;
        point.z = z1;
    }
     
    function setRotateY(point, angleY)
    {
        point.angleY = angleY;
         
        var cosY = Math.cos(point.angleY);
        var sinY = Math.sin(point.angleY);
         
        var x1 = point.x * cosY - point.z * sinY;
        var z1 = point.z * cosY + point.x * sinY;
         
        point.x = x1;
        point.z = z1;
    }
     
    function setRotateZ(point, angleZ)
    {
        var cosZ = Math.cos(point.angleZ);
        var sinZ = Math.sin(point.angleZ);
         
        var x1 = point.x * cosZ - point.y * sinZ;
        var y1 = point.y * cosZ + point.x * sinZ;
         
        point.x = x1;
        point.y = y1;
    }
     
     
    /*
     * 配列の並べ替え: 降順
     */
    function depth(pointA, pointB, pointC)
    {
        var zpos = Math.min(pointA.z, pointB.z);
        zpos = Math.min(zpos, pointC.z);
        return zpos;
    }
     
    function sortZ()
    {
        triangles.sort(function(a, b) 
        {
            if(a["zpos"] < b["zpos"])
            {
                var v = 1;
            }
            else
            {
                v = -1;
            }
            return v;
        });
    }
     
    function mouseMoveHandler(e)
    {
        if(g_mobiledevice)
        {
            var rect = event.currentTarget.getBoundingClientRect();
            mouseX = event.touches[0].pageX - rect.left;
            mouseY = event.touches[0].pageY - rect.top;
        }
        else
        if(g_browsername == 'MSIE'||g_browsername == 'Opera')
        {
            rect = document.getElementById("canvas").getBoundingClientRect();
            mouseX = event.clientX - rect.left;
            mouseY = event.clientY - rect.top;
        }
        else
        if(g_browsername == 'Firefox')
        {
            rect = document.getElementById("canvas").getBoundingClientRect();
            mouseX = e.clientX - rect.left;
            mouseY = e.clientY - rect.top;
        }
        else
        {
            rect = event.currentTarget.getBoundingClientRect();
            mouseX = event.clientX - rect.left;
            mouseY = event.clientY - rect.top;
        }
    }
}
  
// 各ブラウザ対応
window.requestAnimationFrame = (function()
{
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback)
    {
        window.setTimeout(callback, 1000/60);
    };
}());

devicecheck.js

var g_mobiledevice = false; //iPhone、iPad、Androidのときtrue
var g_browsername = 'unknown';
var g_browserver = -1;
 
if(checkUserAgent() == false)
{
    window.alert('このブラウザは対象外です');
}
 
function checkUserAgent()
{
    var ua = navigator.userAgent;
 
    //iPhoneか?  
    var mstr = ua.match(/iPhone OS \d+/);
    if(mstr != null){
        var vstr = mstr[0].match(/\d+/);
        if(parseInt(vstr[0]) >= 3) 
        {
            g_mobiledevice = true;
            g_browsername = 'iPhone';
            //alert('major-version ' + vstr);
            return true;
        }
    }
    //iPadか?
    if(ua.indexOf('iPad') > -1)
    {
        mstr = ua.match(/CPU OS \d+/);
        if(mstr != null)
        {
            var vstr = mstr[0].match(/\d+/);
            if(parseInt(vstr[0]) >= 3) {
                g_mobiledevice = true;
                g_browsername = 'iPad';
                //alert('major-version ' + vstr);
                return true;
            }       
        }       
    }   
    //Androidか? 
    var mstr = ua.match(/Android \d+\.\d+/);
    if(mstr != null)
    {
        g_browsername = 'Android';
        var vstr = mstr[0].match(/\d+\.\d+/);
        g_browserver = parseFloat(vstr[0]);
        g_mobiledevice = true;
        if(pg_browserver > 2.1) 
        {
            //alert('version ' + vstr);
            return true;
        }
    }
    //Chromeか?
    mstr = ua.match(/Chrome\/\d+/);
    if(mstr != null)
    {
        g_browsername = 'Chrome';
        var vstr = mstr[0].match(/\d+/);
        g_browserver = parseInt(vstr[0]);
        if(g_browserver >= 9) 
        {
            //alert('major-version ' + vstr);
             
            return true;
        }       
    }
    //Safariか?
    if(ua.indexOf('Safari') > -1)
    {
        mstr = ua.match(/Version\/\d+/);
        if(mstr != null){
            var vstr = mstr[0].match(/\d+/);
            if(parseInt(vstr[0]) >= 5) 
            {
                g_browsername = 'Safari';
                //alert('major-version ' + vstr);
                return true;
            }       
        }       
    }
    //Internet Explorerか?
    mstr = ua.match(/MSIE \d+/);
    if(mstr != null)
    {
        var vstr = mstr[0].match(/\d+/);
        if(parseInt(vstr[0]) >= 9) 
        {
            g_browsername = 'MSIE';
            //alert('major-version ' + vstr);
            return true;
        }       
    }
    //Firefoxか?
    mstr = ua.match(/Firefox\/\d+/);
    if(mstr != null){
        var vstr = mstr[0].match(/\d+/);
        if(parseInt(vstr[0]) >= 4) 
        {
            g_browsername = 'Firefox';
            //alert('major-version ' + vstr);
            return true;
        }       
    }
    //Operaか?
    if(ua.indexOf('Opera') > -1)
    {
        mstr = ua.match(/Version\/\d+/);
        if(mstr != null){
            var vstr = mstr[0].match(/\d+/);
            if(parseInt(vstr[0]) >= 11) 
            {
                g_browsername = 'Opera';
                //alert('major-version ' + vstr);
                return true;
            }       
        }       
    }
     
    return false;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です