VoxWorldJS/index.html at main · MasterMilkX/VoxWorldJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
    <head>
        <title>VoxWorld JS</title>

        <link rel="stylesheet" href="styles.css">

        <style>
            /*
               QUICK STYLES CHECK
               MOVE TO STYLES.CSS LATER
            */


        </style>

        <!-- import three.js -->
        <script src="js/three.js"></script>

        <!-- import CCapture for gif generation -->
        <script src="js/CCapture.all.min.js"></script>

        <script>
            //toggle the display of the slider menu
            function toggleControls(){
                var show_menu = document.getElementById("sliderControls");
                var hide_menu = document.getElementById("sliderHide");
                if(show_menu.style.display == "none" || show_menu.style.display == ""){
                    show_menu.style.display = "block";
                    hide_menu.style.display = "none";
                }else{
                    show_menu.style.display = "none";
                    hide_menu.style.display = "block";
                }
            }
        </script>
    </head>
    <body onload="init()">
        <div id="container">
            <div id="header">
                VoxWorld JS
            </div>

            <!-- render the structure here -->
            <div style="display:inline-block">
                <div id="render">
                    <canvas id="renderCanvas"></canvas>
                </div>
                 <!-- option buttons / menu here -->
                <div id="menu">
                    <!-- buttons -->
                    <button id="expPNGBtn" onclick="exportPNG()">Export PNG</button>
                    <button id="renderBtn" onclick="make3dStructure(CUR_STRUCTURE)">RENDER</button>
                    <button id="expGIFBtn" onclick="exportGIF()">Export GIF</button>

                    <!-- zoom + angle sliders -->
                    <div id="sliderHide" style="text-align:center">
                        <button style="width:170px;margin-top:20px" onclick="toggleControls()">Show Control View</button>
                        <!-- <p id="angDebug">Angle: 0</p> -->
                        <!-- <br> -->
                        <!-- <img id='preview' width="64" height="48" style="margin-top:20px"> -->
                    </div>
                    <div id="sliderControls">
                        <div class="slideDiv">
                            Angle:
                            <input type="range" min="1" max="360" value="180" class="slider" id="angleView" oninput="changeSlideVal('angleViewVal',this.value)">
                            <input type='number' class='slidVal' id="angleViewVal"  min="0" max="360" step="10" value="180"  onchange="changeSlidePos('angleView',this.value)">
                        </div>
                        <div class="slideDiv">
                            Distance:
                            <input type="range" min="1" max="100" value="15" class="slider" id="zoomView" oninput="changeSlideVal('zoomViewVal',this.value)">
                            <input type='number' class='slidVal' id="zoomViewVal" min="1" max="100" value="15" onchange="changeSlidePos('zoomView',this.value)">
                        </div>
                        <div class="slideDiv">
                            Height:
                            <input type="range" min="-64" max="64" value="2" class="slider" id="heightView" oninput="changeSlideVal('heightViewVal',this.value)">
                            <input type='number' class='slidVal' id="heightViewVal" min="-64" max="64" value="5" onchange="changeSlidePos('heightView',this.value)">
                        </div>
                        <button style="width:180px;margin-top:8px;" onclick="toggleControls()">Hide Control View</button>
                    </div>

                </div>
            </div>

            <!-- import the data here -->
            <div id="dataView">
                <!-- 3d structure + textures -->
                <div id="datSetTop">
                    <input type="file" id="fullJSONFile" style="display: none;" accept=".json" onchange="importFullJSON()"/>
                    <button id="fullImport" onclick="document.getElementById('fullJSONFile').click();">Import JSON</button>
                    <button id="fullExport" onclick="exportFullJSON()">Export JSON</button>
                </div>
                <!-- 3d structure -->
                <textarea id="arr3din" rows="10" cols="35" placeholder="[[[Paste 3d Array Here]]]" onchange="readStructTextArea(this.value)"></textarea>
                <div id="datSettings">
                    <input type="file" id="structFile" style="display: none;" accept=".txt" onchange="readStructFile()"/>
                    <button id="impArr3D" onclick="document.getElementById('structFile').click();">Import Structure</button>
                </div>


                <!-- texture key for the render -->
                <div id="texturekey">
                    <div class="tex_row">
                        <div class="tex_id">0</div>
                        <div class="tex_name"><select class="tex_select"><option>Air</option></select></div>
                        <div class="tex_img"><img src="textures/air.png"></div>
                    </div>
                    <div class="tex_row">
                        <div class="tex_id">1</div>
                        <div class="tex_name">
                            <select class="tex_select">
                                <option value="cobblestone">Cobblestone</option>
                                <option value="dirt">Dirt</option>
                                <option value="oak_wood_planks">Oak Wood Planks</option>
                                <option value="diamond_block">Diamond Block</option>
                            </select>
                        </div>
                        <div class="tex_img"><img src="textures/cobblestone.png"></div>
                    </div>
                </div>

                <!-- allow import of dataset here -->
                <div id="texSettings">
                    <input type="number" min="2" max="100" value="10" id="numTextures" onchange="makeTextures(this.value,true)">
                    <input type="file" id="textureFile" style="display: none;" accept=".txt" onchange="readTextureFile()"/>
                    <button id="impTex" onclick="document.getElementById('textureFile').click();">Import Set</button>
                    <button id="expTex" onclick="exportTextureSet()">Export Set</button>
                </div>
            </div>


        </div>
        <script src="js/browser_code.js"></script>
    </body>
</html>