Drag the triangle around
This commit is contained in:
parent
0edc53d30a
commit
bc5f24352b
@ -47,13 +47,43 @@
|
|||||||
let program = initShaderProgram(gl);
|
let program = initShaderProgram(gl);
|
||||||
let viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix");
|
let viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix");
|
||||||
|
|
||||||
let rotation = 0;
|
// Set up mouse-panning state machine.
|
||||||
let then = 0;
|
let θy = 0;
|
||||||
const render = (now) => {
|
let θx = 0.25;
|
||||||
const Δtime = (now - then) * 0.001;
|
const PanState = Object.freeze({
|
||||||
then = now;
|
idle: (event) => {
|
||||||
|
if (event.type === "mousedown") {
|
||||||
|
return PanState.panning;
|
||||||
|
}
|
||||||
|
return PanState.idle;
|
||||||
|
},
|
||||||
|
panning: (event) => {
|
||||||
|
switch (event.type) {
|
||||||
|
case "mouseup":
|
||||||
|
return PanState.idle;
|
||||||
|
case "mouseover":
|
||||||
|
if ((event.buttons & 1) == 0) {
|
||||||
|
return PanState.idle;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "mousemove":
|
||||||
|
θy += event.movementX * 0.025;
|
||||||
|
θx += event.movementY * 0.025;
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return PanState.panning;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const runPanState = (mouseEvent) => {
|
||||||
|
panState = panState(mouseEvent);
|
||||||
|
}
|
||||||
|
var panState = PanState.idle;
|
||||||
|
viewer.addEventListener("mousedown", runPanState);
|
||||||
|
viewer.addEventListener("mouseup", runPanState);
|
||||||
|
viewer.addEventListener("mouseover", runPanState);
|
||||||
|
viewer.addEventListener("mousemove", runPanState);
|
||||||
|
|
||||||
|
const render = () => {
|
||||||
gl.useProgram(program);
|
gl.useProgram(program);
|
||||||
|
|
||||||
let vertexBuffer = gl.createBuffer();
|
let vertexBuffer = gl.createBuffer();
|
||||||
@ -67,18 +97,15 @@
|
|||||||
|
|
||||||
// Create the transformation matrix.
|
// Create the transformation matrix.
|
||||||
let viewMatrix = mat4.create();
|
let viewMatrix = mat4.create();
|
||||||
mat4.rotateX(viewMatrix, viewMatrix, 0.25);
|
mat4.rotateX(viewMatrix, viewMatrix, θx);
|
||||||
mat4.rotateY(viewMatrix, viewMatrix, rotation);
|
mat4.rotateY(viewMatrix, viewMatrix, θy);
|
||||||
gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix);
|
gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix);
|
||||||
|
|
||||||
|
|
||||||
let positionLocation = gl.getAttribLocation(program, "position");
|
let positionLocation = gl.getAttribLocation(program, "position");
|
||||||
gl.enableVertexAttribArray(positionLocation);
|
gl.enableVertexAttribArray(positionLocation);
|
||||||
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4*3, 0);
|
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4 * 3, 0);
|
||||||
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
||||||
|
|
||||||
rotation += Δtime;
|
|
||||||
|
|
||||||
requestAnimationFrame(render);
|
requestAnimationFrame(render);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user