pol/wmc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add param panel to control lighting

Browse Source
This commit is contained in:
Paul Mathieu
2021-12-12 11:36:47 -08:00
parent 5175232b6d
commit 9a859ac6c2
2 changed files with 94 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@@ -3,11 +3,68 @@
<head>
<title>WebMinecraft</title>
<script src="app.js"></script>
<style>
body {
font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
}
.params {
background-color: cadetblue;
width: fit-content;
}
.collapsible {
padding: 8px;
cursor: pointer;
border: none;
text-align: left;
width: 100%;
font-size: medium;
}
.paramContent {
display: flex;
overflow-y: hidden;
height: 0px;
}
.paramPanel {
padding: 10px;
background-color: #eeeeee;
}
</style>
</head>
<body>
<canvas id="game" width="1024" height="768"></canvas>
<div id="fps"></div>
<div class="params">
<button class="collapsible">Parameters</button>
<div class="paramContent">
<div class="paramPanel">
<h3>Light direction</h3>
<p>
x:
<input type="range" min="-100" max="100" value="50" class="slider" id="lightx" />
</p>
<p>
y:
<input type="range" min="-100" max="100" value="50" class="slider" id="lighty" />
</p>
<p>
z:
<input type="range" min="-100" max="100" value="50" class="slider" id="lightz" />
</p>
<p>
<div id="lightDirVec"></div>
</p>
</div>
<div class="paramPanel">
<h3>Ambiant light</h3>
<p>
<input type="range" min="0" max="100" value="50" class="slider" id="ambiant" />
</p>
</div>
</div>
</div>
</body>
</html>