html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://raw.githack.com/DonDejvo/LancelotNXT/main/dist/lancelot-nxt-nomodule.js">
</script>
</head>
<body>
<canvas></canvas>
<div>
<label>light</label>
<input type="checkbox" name="lightSwitch" id="lightSwitch">
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
body
{
margin: 0;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
const { GlContext3D, Texture, shaders, models } = LancelotNXT.renderer;
const { mat4, vec3 } = LancelotNXT.glMatrix;
onload = main;
function main() {
const lightSwitch = document.getElementById("lightSwitch");
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
addEventListener("resize", resize);
resize();
const shader1 = new shaders.ColorLightShader(gl);
const shader2 = new shaders.ColorShader(gl);
const fieldOfView = Math.PI * 0.25;
const aspect = gl.canvas.width / gl.canvas.height;
const zNear = 0.1;
const zFar = 100.0;
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run