Test of JSModeler

JSModeler でドット絵を描いてみるテスト http://jsdo.it/cx20/yzCVkovacsv/JSModeler https://github.com/kovacsv/JSModeler

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Test of JSModeler</title>
  
  
  <link rel='stylesheet prefetch' href='https://rawgit.com/kovacsv/JSModeler/master/documentation/examples/legobuilder.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <canvas id="example" width="465" height="465"></canvas>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js'></script>
<script src='http://rawgit.com/kovacsv/JSModeler/master/build/jsmodeler.js'></script>
<script src='http://rawgit.com/kovacsv/JSModeler/master/documentation/examples/legogenerator.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #000;
}
/* Downloaded from https://www.codeseek.co/ */
// ‥‥‥‥‥‥‥‥‥‥‥‥‥□□□
// ‥‥‥‥‥‥〓〓〓〓〓‥‥□□□
// ‥‥‥‥‥〓〓〓〓〓〓〓〓〓□□
// ‥‥‥‥‥■■■□□■□‥■■■
// ‥‥‥‥■□■□□□■□□■■■
// ‥‥‥‥■□■■□□□■□□□■
// ‥‥‥‥■■□□□□■■■■■‥
// ‥‥‥‥‥‥□□□□□□□■‥‥
// ‥‥■■■■■〓■■■〓■‥‥‥
// ‥■■■■■■■〓■■■〓‥‥■
// □□■■■■■■〓〓〓〓〓‥‥■
// □□□‥〓〓■〓〓□〓〓□〓■■
// ‥□‥■〓〓〓〓〓〓〓〓〓〓■■
// ‥‥■■■〓〓〓〓〓〓〓〓〓■■
// ‥■■■〓〓〓〓〓〓〓‥‥‥‥‥
// ‥■‥‥〓〓〓〓‥‥‥‥‥‥‥‥
var dataSet = [
    "BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BG","BG","BG",
    "BK","BK","BK","BK","BK","BK","RD","RD","RD","RD","RD","BK","BK","BG","BG","BG",
    "BK","BK","BK","BK","BK","RD","RD","RD","RD","RD","RD","RD","RD","RD","BG","BG",
    "BK","BK","BK","BK","BK","BR","BR","BR","BG","BG","BR","BG","BK","RD","RD","RD",
    "BK","BK","BK","BK","BR","BG","BR","BG","BG","BG","BR","BG","BG","RD","RD","RD",
    "BK","BK","BK","BK","BR","BG","BR","BR","BG","BG","BG","BR","BG","BG","BG","RD",
    "BK","BK","BK","BK","BR","BR","BG","BG","BG","BG","BR","BR","BR","BR","RD","BK",
    "BK","BK","BK","BK","BK","BK","BG","BG","BG","BG","BG","BG","BG","RD","BK","BK",
    "BK","BK","RD","RD","RD","RD","RD","BL","RD","RD","RD","BL","RD","BK","BK","BK",
    "BK","RD","RD","RD","RD","RD","RD","RD","BL","RD","RD","RD","BL","BK","BK","BR",
    "BG","BG","RD","RD","RD","RD","RD","RD","BL","BL","BL","BL","BL","BK","BK","BR",
    "BG","BG","BG","BK","BL","BL","RD","BL","BL","YL","BL","BL","YL","BL","BR","BR",
    "BK","BG","BK","BR","BL","BL","BL","BL","BL","BL","BL","BL","BL","BL","BR","BR",
    "BK","BK","BR","BR","BR","BL","BL","BL","BL","BL","BL","BL","BL","BL","BR","BR",
    "BK","BR","BR","BR","BL","BL","BL","BL","BL","BL","BL","BK","BK","BK","BK","BK",
    "BK","BR","BK","BK","BL","BL","BL","BL","BK","BK","BK","BK","BK","BK","BK","BK"
];

function getRgbColor(colorType)
{
    var colorHash = {
        "BK":0x000000, // black
        "WH":0xFFFFFF, // white
        "BG":0xFFCCCC, // beige
        "BR":0x800000, // brown
        "RD":0xFF0000, // red
        "YL":0xFFFF00, // yellow
        "GN":0x00FF00, // green
        "WT":0x00FFFF, // water
        "BL":0x0000FF, // blue
        "PR":0x800080  // purple
    };
    return colorHash[colorType];
}

var viewer = null;
var legoBuild = null;

function GenerateLegoBuild(index) {
    var bodyAndMaterials = legoBuild.GetBodyAndMaterials(index);
    var meshes = JSM.ConvertBodyToThreeMeshes(bodyAndMaterials[0], bodyAndMaterials[1]);
    for (var i = 0; i < meshes.length; i++) {
        viewer.AddMesh(meshes[i]);
    }
}

function GetColorTable() {
    var colors = [
        '#FEC400',
        '#E76318',
        '#DE000D',
        '#80081B',
        '#0057A8',
        '#478CC6',
        '#007B28',
        '#5F8265',
        '#95B90B',
        '#5B1C0C',
        '#8D7452',
        '#D67240'
    ];
    return colors;
}


function drawMario() {
    var tableSize = 16;
    var x, y;
    var columns = 1;
    var rows = 1;
    var isLarge = false;
    for (var i = 0; i < dataSet.length; i++) {
        x = i % 16;
        y = Math.floor(i / 16);

        if (dataSet[i] != "BK") {
            var color = getRgbColor(dataSet[i]);
            legoBuild.AddLegoBrick(new JSM.LegoBrick(y, x, columns, rows, isLarge, color));
            GenerateLegoBuild(legoBuild.BrickCount() - 1);
        }
    }
    viewer.Draw();
}


function Load() {
    var TextureLoaded = function () {
        viewer.Draw();
    };

    var viewerSettings = {
        "cameraEyePosition": [1.0, -0.5, 1.0],
        "cameraCenterPosition": [0.0, 0.0, 0.0],
        "cameraUpVector": [0, 0, 5]
    };

    var settings = {
        mode: 'Polygon',
        color: '#00aa00'
    };

    var tableSize = 16;

    viewer = new JSM.ThreeViewer();
    if (!viewer.Start('example', viewerSettings)) {
        return;
    }

    legoBuild = new JSM.LegoBuild(new JSM.LegoTable(tableSize, tableSize));
    GenerateLegoBuild(0);

    viewer.FitInWindow();
    viewer.Draw();

    drawMario();
}

window.onload = function () {
    Load();
};

This awesome code ( Test of JSModeler ) is write by cx20, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © cx20