minor changes
This commit is contained in:
parent
790d421741
commit
d51b248225
|
|
@ -6,31 +6,17 @@ import mat4 from 'gl-mat4';
|
|||
* @param {any} context the program context
|
||||
*/
|
||||
export function updateCamera(context: any) {
|
||||
const xAxis = mat4.create();
|
||||
mat4.rotateY(xAxis, xAxis, 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],
|
||||
]);
|
||||
const mat = mat4.create();
|
||||
mat4.rotateY(mat, mat, context.params.camRot.y);
|
||||
if (context.params.keyboard.a) {
|
||||
context.params.camPos.x += xMat[0];
|
||||
context.params.camPos.y += xMat[4];
|
||||
context.params.camPos.z += xMat[8];
|
||||
context.params.camPos.x += mat[0];
|
||||
context.params.camPos.y += mat[4];
|
||||
context.params.camPos.z += mat[8];
|
||||
}
|
||||
if (context.params.keyboard.d) {
|
||||
context.params.camPos.x -= xMat[0];
|
||||
context.params.camPos.y -= xMat[4];
|
||||
context.params.camPos.z -= xMat[8];
|
||||
context.params.camPos.x -= mat[0];
|
||||
context.params.camPos.y -= mat[4];
|
||||
context.params.camPos.z -= mat[8];
|
||||
}
|
||||
if (context.params.keyboard.space) {
|
||||
context.params.camPos.y -= 1;
|
||||
|
|
@ -39,13 +25,13 @@ export function updateCamera(context: any) {
|
|||
context.params.camPos.y += 1;
|
||||
}
|
||||
if (context.params.keyboard.w) {
|
||||
context.params.camPos.x += zMat[2];
|
||||
context.params.camPos.y += zMat[6];
|
||||
context.params.camPos.z += zMat[10];
|
||||
context.params.camPos.x += mat[2];
|
||||
context.params.camPos.y += mat[6];
|
||||
context.params.camPos.z += mat[10];
|
||||
}
|
||||
if (context.params.keyboard.s) {
|
||||
context.params.camPos.x -= zMat[2];
|
||||
context.params.camPos.y -= zMat[6];
|
||||
context.params.camPos.z -= zMat[10];
|
||||
context.params.camPos.x -= mat[2];
|
||||
context.params.camPos.y -= mat[6];
|
||||
context.params.camPos.z -= mat[10];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export function uiUpdateScene(context: any) {
|
|||
</div>`;
|
||||
}
|
||||
$('#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 + `
|
||||
</button>
|
||||
<div class="collapse" id="collapse` + context.scene.length + `">
|
||||
|
|
@ -117,14 +117,14 @@ export function uiUpdateScene(context: any) {
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<form id="` + context.scene.length + `instanceoptions">` + instanceRadioString + `</form>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -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">
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@
|
|||
<div id='screen-warning'>
|
||||
</div>
|
||||
<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'>
|
||||
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 class='ui-block my-2'>
|
||||
<div class='text-left' style='display: inline-block; width:30%;'>Change shader: </div>
|
||||
|
|
@ -66,19 +66,19 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline-block; width:30%;'>Change 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%;'>Change base rotation speed: </div>
|
||||
<div style='display: inline-block; width:30%;'>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">
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
</form>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -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">
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue