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

added base rotation + git links

This commit is contained in:
gbrochar 2020-11-25 13:45:25 +01:00
parent e568664fa7
commit ca293366fb
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/main.ts
View File

@ -248,6 +248,7 @@ async function main() {
y: $('#roty').val(), y: $('#roty').val(),
z: $('#rotz').val(), z: $('#rotz').val(),
}, },
rotSpeed: $('#rotspeed').val(),
}; };
const [ const [
@ -378,6 +379,10 @@ async function main() {
const rotz: any = $('#rotz').val(); const rotz: any = $('#rotz').val();
params.rot.z = parseFloat(rotz); params.rot.z = parseFloat(rotz);
}); });
$('#rotspeed').on('input', function() {
const rotSpeed: any = $('#rotspeed').val();
params.rotSpeed = parseFloat(rotSpeed);
});
$('#fov').on('input', function() { $('#fov').on('input', function() {
const fov: any = $('#fov').val(); const fov: any = $('#fov').val();
params.fov = parseFloat(fov); params.fov = parseFloat(fov);
@ -510,6 +515,9 @@ function drawScene(gl: any,
-params.avg.y, -params.avg.y,
-params.avg.z, -params.avg.z,
]); ]);
mat4.rotateY(modelMatrix,
modelMatrix,
squareRotation);
// Set the drawing position to the "identity" point, which is // Set the drawing position to the "identity" point, which is
// the center of the scene. // the center of the scene.
@ -621,5 +629,5 @@ function drawScene(gl: any,
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset); gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
} }
squareRotation += deltaTime; squareRotation += deltaTime * params.rotSpeed;
} }

13
views/index.ejs
View File

@ -33,14 +33,18 @@
<div style='display: inline;'>Change fov : </div> <div style='display: inline;'>Change fov : </div>
<input type="range" min="15" max="150" value="45" class="slider" id="fov"> <input type="range" min="15" max="150" value="45" class="slider" id="fov">
</div> </div>
<div class='ui-block'>
<div style='display: inline;'>Change base rotation speed : </div>
<input type="range" min="0" max="5" value="1" step='0.0001' class="slider" id="rotspeed">
</div>
<div class='ui-block'> <div class='ui-block'>
<div style='display: inline;'>Change rotation : </div> <div style='display: inline;'>Change rotation : </div>
<div style='display: inline;'>X: </div> <div style='display: inline;'>X: </div>
<input type="range" min="0" max="6.2830" value="0.5" step='0.0001' class="slider" id="rotx"> <input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotx">
<div style='display: inline;'>Y: </div> <div style='display: inline;'>Y: </div>
<input type="range" min="0" max="6.2830" value="0.8" step='0.01' class="slider" id="roty"> <input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="roty">
<div style='display: inline;'>Z: </div> <div style='display: inline;'>Z: </div>
<input type="range" min="0" max="6.2830" value="1" step='0.01' class="slider" id="rotz"> <input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotz">
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<button id='o_sphere'>Set object to sphere</button> <button id='o_sphere'>Set object to sphere</button>
@ -58,6 +62,9 @@
<button id='t_racer_wireframe'>Set texture to racer wireframe</button> <button id='t_racer_wireframe'>Set texture to racer wireframe</button>
</div> </div>
<div class='ui-block'> <div class='ui-block'>
<a href='https://git.gaetanbrochard.dev/gbrochar/webgl'>This project's git</a>
<br>
<a href='https://git.gaetanbrochard.dev/gbrochar'>My git</a>
<p>If you're on mobile, you need to set the shader to texture or sobel to change object, then you can change the shader</p> <p>If you're on mobile, you need to set the shader to texture or sobel to change object, then you can change the shader</p>
</div> </div>
</div> </div>