computergraphicsproject/index.html at main · Westdespair/computergraphicsproject · 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
<!doctype html>

<html>
    <head>
        <title>City Visualizer</title>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <div class="sidepanel">
            <p>
                <h3>Instructions:</h3> <br>
                <b>Left click and drag</b> - Rotate camera <br>
                <b>Right click and drag</b> - Pan camera <br>
                <b>Scroll</b> - Zoom camera <br>
                <b>Shift</b> - Hold to swap rotate and pan buttons <br>
                <br>
                Select objects by clicking, move them by dragging handles</b><br>
                <b>When object is selected:</b> <br>
                <b>R</b> - Toggle rotation/translation <br>
                <b>Shift</b> - Hold for snapping <br>
                <b>Delete</b> - Remove selected object <br>
            </p>
            <label for="sun_slider">Sun position: from E - > W</label>

            <input type="range" id="sun_slider" min="10" max="170" value="145" step="1">


            <p>
                <label for="shape">Shape:</label>
            <select name="shape" id="shape">
                <option value="Cube">Cube</option>
                <option value="House">House</option>
                <option value="Skyscraper">Skyscraper</option>
                <option value="Bush">Bush</option>
                <option value="Tree">Tree</option>
                <option value="Playground">Playground</option>
                <option value="Picnicbench">Picnic Bench</option>
                <option value="Parkbench">Park Bench</option>
                <option value="Landmark">Landmark</option>
            </select>


            <button id="addBtn">Add object.</button>

            </p>


            <p>
                <b>Camera Controls:</b> <br>
                <label for="fov_slider">FOV</label>
                <input type="range" id="fov_slider" min="10" max="120" value="0" step="1">
                <output id="fov_display" for="fov_slider">0</output>
                <button id="reset_camera_btn">Reset camera position</button>
            </p>
        </div>
        <div class="scene">
            <canvas id="main_canvas" width="800" height="600">
                Please use a browser that supports "canvas"
            </canvas>
        </div>


        <div class="output">
            <h3>Park lighting:</h3> <br>
            <canvas id="heatmap_canvas" width="50" height="20">
                Please use a browser that supports "canvas"
            </canvas>

            <button id="calc_heatmap_btn">Calculate shadow heatmap</button> <br>
            <br>
            <label for="calc_samples"># samples for sun position:</label>
            <input id="calc_samples" type="number" value="100" min="20" max="300" step="1"> <br>
            <br>
            <label for="calc_canv_width">Heatmap width (px):</label>
            <input id="calc_canv_width" type="number" value="50" min="10" max="800" step="1"> <br>
            Large values are slow, beware!<br>
            <br>
            <label for="calc_progress"><b>Calculation progress:</b></label>
            <progress id="calc_progress" value="0" max="1"> 0% </progress>
        </div>
    </body>


    <!-- Fetch three and addons -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    <script type="importmap">
    {
        "imports": {
        "three": "./node_modules/three/build/three.module.js",
        "three/addons/": "./node_modules/three/examples/jsm/"
        }
    }
    </script>

    <script src="src/objects/building.js"></script>
    <script src="src/index.js" type="module"></script>
</html>