gbrochar
/
webgl
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

minor changes

This commit is contained in:
gbrochar 2020-11-29 12:02:55 +01:00
parent 790d421741
commit d51b248225
3 changed files with 29 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/client/camera.ts
View File

@ -6,31 +6,17 @@ import mat4 from 'gl-mat4';
* @param {any} context the program context * @param {any} context the program context
*/ */
export function updateCamera(context: any) { export function updateCamera(context: any) {
const xAxis = mat4.create(); const mat = mat4.create();
mat4.rotateY(xAxis, xAxis, context.params.camRot.y); mat4.rotateY(mat, mat, context.params.camRot.y);
const xMat = mat4.create();
mat4.rotateY(xMat, xMat, context.params.camRot.y);
mat4.rotate(xMat, xMat, context.params.camRot.x, [
xAxis[0],
xAxis[4],
xAxis[8],
]);
const zMat = mat4.create();
mat4.rotateY(zMat, zMat, context.params.camRot.y);
mat4.rotate(zMat, zMat, context.params.camRot.x, [
xAxis[0],
xAxis[4],
xAxis[8],
]);
if (context.params.keyboard.a) { if (context.params.keyboard.a) {
context.params.camPos.x += xMat[0]; context.params.camPos.x += mat[0];
context.params.camPos.y += xMat[4]; context.params.camPos.y += mat[4];
context.params.camPos.z += xMat[8]; context.params.camPos.z += mat[8];
} }
if (context.params.keyboard.d) { if (context.params.keyboard.d) {
context.params.camPos.x -= xMat[0]; context.params.camPos.x -= mat[0];
context.params.camPos.y -= xMat[4]; context.params.camPos.y -= mat[4];
context.params.camPos.z -= xMat[8]; context.params.camPos.z -= mat[8];
} }
if (context.params.keyboard.space) { if (context.params.keyboard.space) {
context.params.camPos.y -= 1; context.params.camPos.y -= 1;
@ -39,13 +25,13 @@ export function updateCamera(context: any) {
context.params.camPos.y += 1; context.params.camPos.y += 1;
} }
if (context.params.keyboard.w) { if (context.params.keyboard.w) {
context.params.camPos.x += zMat[2]; context.params.camPos.x += mat[2];
context.params.camPos.y += zMat[6]; context.params.camPos.y += mat[6];
context.params.camPos.z += zMat[10]; context.params.camPos.z += mat[10];
} }
if (context.params.keyboard.s) { if (context.params.keyboard.s) {
context.params.camPos.x -= zMat[2]; context.params.camPos.x -= mat[2];
context.params.camPos.y -= zMat[6]; context.params.camPos.y -= mat[6];
context.params.camPos.z -= zMat[10]; context.params.camPos.z -= mat[10];
} }
} }

8
src/client/uiscene.ts
View File

@ -80,7 +80,7 @@ export function uiUpdateScene(context: any) {
</div>`; </div>`;
} }
$('#scene-block').append(` $('#scene-block').append(`
<button class="btn btn-scene" type="button" data-toggle="collapse" data-target="#collapse` + context.scene.length + `" aria-expanded="false" aria-controls="collapse` + context.scene.length + `"> <button class="btn btn-scene my-1" type="button" data-toggle="collapse" data-target="#collapse` + context.scene.length + `" aria-expanded="false" aria-controls="collapse` + context.scene.length + `">
Object ` + context.scene.length + ` Object ` + context.scene.length + `
</button> </button>
<div class="collapse" id="collapse` + context.scene.length + `"> <div class="collapse" id="collapse` + context.scene.length + `">
@ -117,14 +117,14 @@ export function uiUpdateScene(context: any) {
</div> </div>
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<div style='display: inline-block; width:30%;'>Change instances number: </div> <div style='display: inline-block; width:30%;'>Instances Number: </div>
<input class='custom-range' style='width:65%' type="range" min="1" max="180" value="9" step='1' class="slider" id="` + context.scene.length + `instance"> <input class='custom-range' style='width:65%' type="range" min="1" max="180" value="9" step='1' class="slider" id="` + context.scene.length + `instance">
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<form id="` + context.scene.length + `instanceoptions">` + instanceRadioString + `</form> <form id="` + context.scene.length + `instanceoptions">` + instanceRadioString + `</form>
</div> </div>
<div class='ui-block my-2'> <div class='ui-block my-2'>
<div style='display: inline-block; width:30%;'>Change rotation: </div> <div style='display: inline-block; width:30%;'>Rotate: </div>
<div class='m-0 p-0' style='display: inline-block; width:2%;'>X: </div> <div class='m-0 p-0' style='display: inline-block; width:2%;'>X: </div>
<input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="` + context.scene.length + `rotx"> <input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="` + context.scene.length + `rotx">
<div class='m-0 p-0' style='display: inline-block; width:2%;'>Y: </div> <div class='m-0 p-0' style='display: inline-block; width:2%;'>Y: </div>
@ -133,7 +133,7 @@ export function uiUpdateScene(context: any) {
<input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="` + context.scene.length + `rotz"> <input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="` + context.scene.length + `rotz">
</div> </div>
<div class='ui-block my-2'> <div class='ui-block my-2'>
<div style='display: inline-block; width:30%;'>Change scale: </div> <div style='display: inline-block; width:30%;'>Scale: </div>
<div style='display: inline-block; width:2%;'>X: </div> <div style='display: inline-block; width:2%;'>X: </div>
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="1" min="0" step='0.00001' id="` + context.scene.length + `scalex"> <input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="1" min="0" step='0.00001' id="` + context.scene.length + `scalex">
<div style='display: inline-block; width:2%;'>Y: </div> <div style='display: inline-block; width:2%;'>Y: </div>

22
views/index.ejs
View File

@ -19,10 +19,10 @@
<div id='screen-warning'> <div id='screen-warning'>
</div> </div>
<div id="root"> <div id="root">
<div class='mx-0 px-0' id='ui' style='display: inline-block; width: 620px'> <div class='mx-1 px-0' id='ui' style='display: inline-block; width: 620px'>
<div class='ui-block lead' style='width: 620px'> <div class='ui-block lead' style='width: 620px'>
To control the camera orientation with mouse, click in the canvas, to exit, click again.<br> To control the camera orientation with mouse, click in the canvas, to exit, click again.<br>
To control the camera position, use W/S for Z axis, A/D for X axis, and Space/Shift for fixed Y axis. To control the camera position, use W/S for Z axis, A/D for X axis, and Space/Shift for Y axis.
</div> </div>
<div class='ui-block my-2'> <div class='ui-block my-2'>
<div class='text-left' style='display: inline-block; width:30%;'>Change shader: </div> <div class='text-left' style='display: inline-block; width:30%;'>Change shader: </div>
@ -66,19 +66,19 @@
</div> </div>
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<div style='display: inline-block; width:30%;'>Change circle size: </div> <div style='display: inline-block; width:30%;'>Circle Size: </div>
<input class='custom-range' style='width:65%' type="range" min="0" max="30" value="2" step='0.001' class="slider" id="circlesize"> <input class='custom-range' style='width:65%' type="range" min="0" max="30" value="2" step='0.001' class="slider" id="circlesize">
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<div style='display: inline-block; width:30%;'>Change fov: </div> <div style='display: inline-block; width:30%;'>Rotation Speed: </div>
<input class='custom-range' style='width:65%' type="range" min="15" max="150" value="45" class="slider" id="fov">
</div>
<div class='ui-block'>
<div style='display: inline-block; width:30%;'>Change base rotation speed: </div>
<input class='custom-range' style='width:65%' type="range" min="0" max="5" value="1" step='0.0001' class="slider" id="rotspeed"> <input class='custom-range' style='width:65%' type="range" min="0" max="5" value="1" step='0.0001' class="slider" id="rotspeed">
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<div style='display: inline-block; width:30%;'>Change instances number: </div> <div style='display: inline-block; width:30%;'>FOV: </div>
<input class='custom-range' style='width:65%' type="range" min="15" max="150" value="45" class="slider" id="fov">
</div>
<div class='ui-block'>
<div style='display: inline-block; width:30%;'>Instances Number: </div>
<input class='custom-range' style='width:65%' type="range" min="1" max="180" value="9" step='1' class="slider" id="instance"> <input class='custom-range' style='width:65%' type="range" min="1" max="180" value="9" step='1' class="slider" id="instance">
</div> </div>
<div class='ui-block'> <div class='ui-block'>
@ -98,7 +98,7 @@
</form> </form>
</div> </div>
<div class='ui-block my-2'> <div class='ui-block my-2'>
<div style='display: inline-block; width:30%;'>Change rotation: </div> <div style='display: inline-block; width:30%;'>Rotate: </div>
<div class='m-0 p-0' style='display: inline-block; width:2%;'>X: </div> <div class='m-0 p-0' style='display: inline-block; width:2%;'>X: </div>
<input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotx"> <input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotx">
<div class='m-0 p-0' style='display: inline-block; width:2%;'>Y: </div> <div class='m-0 p-0' style='display: inline-block; width:2%;'>Y: </div>
@ -107,7 +107,7 @@
<input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotz"> <input class='custom-range m-0 p-0' style='width:19%' type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotz">
</div> </div>
<div class='ui-block my-2'> <div class='ui-block my-2'>
<div style='display: inline-block; width:30%;'>Change scale: </div> <div style='display: inline-block; width:30%;'>Scale: </div>
<div style='display: inline-block; width:2%;'>X: </div> <div style='display: inline-block; width:2%;'>X: </div>
<input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="1" min="0" step='0.00001' id="scalex"> <input class='form-control m-0 p-0' style='display: inline-block; width:19%' type="number" value="1" min="0" step='0.00001' id="scalex">
<div style='display: inline-block; width:2%;'>Y: </div> <div style='display: inline-block; width:2%;'>Y: </div>