在three.js中是通過射線檢測THREE.Raycaster()這個方法，來獲取點擊位置與射線相交的對象，這個webgl示例走了個捷徑，通過對比物體的顏色和點擊處的像素值，來檢測是否點擊了物體，下面是示例效果
主要示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webgl-example</title>
</head>
<body>
<canvas id="webgl" width="512" height="512" style="position: absolute; z-index: 0;margin: 0 auto;"></canvas>
<canvas id="hud" width="512" height="512" style="position: absolute;z-index: 1;"></canvas>
</body>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script>
<script>
// 頂點着色器
var v_shader_source = '' +
'attribute vec4 a_Position;' +
'attribute vec4 a_Color;' +
'uniform mat4 u_MvpMatrix;' +
'uniform bool u_Clicked;' +
'varying vec4 v_Color;' +
'void main(){' +
' gl_Position = u_MvpMatrix * a_Position;' +
' if(u_Clicked){' + // 如果鼠標點擊到就把顏色繪製爲紅色
' v_Color = vec4(1.0, 0.0, 0.0, 1.0);' +
' }else{' +
' v_Color = a_Color;' +
' }' +
'}';
// 片元着色器
var f_shader_source = '' +
'precision mediump float;' +
'varying vec4 v_Color;' +
'void main(){' +
' gl_FragColor = v_Color;' +
'}';
// 獲取當前角度
var ANGLE_STEP = 30.0; // 旋轉角度
var g_last = Date.now(); // 方法最後被調用的時間
function getCurrentAngle(angle) {
var now = Date.now();
var elapsed = now - g_last;
g_last = now;
var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
return newAngle %= 360;
}
(function () {
var canvas = document.getElementById('webgl');
var hud = document.getElementById('hud');
var gl = getWebGLContext(canvas);
var ctx = hud.getContext('2d');
if (!gl || !ctx) {
console.log('不能獲取上下文對象');
return false;
}
// 初始化渲染器
if (!initShaders(gl, v_shader_source, f_shader_source)) {
console.log('初始化着色器失敗');
return false;
}
// 設置頂點位置
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('初始化頂點信息失敗');
return false;
}
// 設置清楚顏色
gl.clearColor(0.0, 0.5, 0.5, 1.0);
// 開啓深度檢測
gl.enable(gl.DEPTH_TEST);
var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
var u_Clicked = gl.getUniformLocation(gl.program, 'u_Clicked');
if (!u_MvpMatrix || !u_Clicked) {
console.log('獲取 uniform 變量存儲位置失敗');
return false;
}
// 投影視圖矩陣設置
var viewProjMatrix = new Matrix4();
viewProjMatrix.setPerspective(30.0, canvas.width / canvas.height, 1.0, 100);
// 視點觀察點和上方向
viewProjMatrix.lookAt(0.0, 0.0, 9.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
gl.uniform1i(u_Clicked, 0);
// 模型視圖投影矩陣
var g_MvpMatrix = new Matrix4();
var currentAngle = 0.0;
// 循環渲染
function animate() {
requestAnimationFrame(animate);
currentAngle = getCurrentAngle(currentAngle);
draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
draw2D(ctx, currentAngle);
}
animate();
function draw2D(ctx, currentAngle) {
ctx.clearRect(0, 0, 512, 512); // Clear <hud>
// Draw triangle with white lines
ctx.beginPath(); // Start drawing
ctx.moveTo(60, 5);
ctx.lineTo(100, 75);
ctx.lineTo(20, 75);
ctx.closePath();
ctx.strokeStyle = 'rgba(100, 255, 255, 1)'; // Set white to color of lines
ctx.stroke(); // Draw Triangle with white lines
// Draw white letters
ctx.font = '15px "Times New Roman"';
ctx.fillStyle = 'rgba(100, 255, 255, 1)'; // Set white to the color of letters
ctx.fillText('HUD: Head Up Display', 15, 100);
ctx.fillText('Current Angle: ' + Math.floor(currentAngle), 15, 120);
}
// 鼠標點擊事件
hud.onmousedown = function (event) {
var x = event.clientX;
var y = event.clientY;
var rect = event.target.getBoundingClientRect();
var x_in_canvas = x - rect.left;
var y_in_canvas = rect.bottom - y;
var picked = check(gl, n, x_in_canvas, y_in_canvas, currentAngle, u_Clicked, viewProjMatrix);
if (picked) {
console.log('選中模型');
// 設置清楚顏色
gl.clearColor(Math.random(), Math.random(), Math.random(), Math.random());
}
}
function check(gl, n, x, y, currentAngle, u_Clicked, viewProjMatrix, u_MvpMatrix) {
var picked = false;
gl.uniform1i(u_Clicked, 1);
draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
// 獲取點擊位置的像素
var pixels = new Uint8Array(4);
// 獨區點擊位置的像素值
gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
if (pixels[0] == 255) {
picked = true;
}
gl.uniform1i(u_Clicked, 0);
draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
return picked;
}
function draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix) {
// 將viewProjMatrix設置爲g_MvpMatrix
g_MvpMatrix.set(viewProjMatrix);
g_MvpMatrix.rotate(currentAngle, 1.0, 0.0, 0.0);
g_MvpMatrix.rotate(currentAngle, 0.0, 1.0, 0.0);
g_MvpMatrix.rotate(currentAngle, 0.0, 0.0, 1.0);
gl.uniformMatrix4fv(u_MvpMatrix, false, g_MvpMatrix.elements);
// 清空緩存重新繪製
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}
function initVertexBuffers(gl) {
// Create a cube
// v6----- v5
// /| /|
// v1------v0|
// | | | |
// | |v7---|-|v4
// |/ |/
// v2------v3
// 頂點座標
var vertices = new Float32Array([ // Vertex coordinates
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front
1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right
1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
-1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left
-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down
1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0 // v4-v7-v6-v5 back
]);
// 頂點顏色
var colors = new Float32Array([ // Colors
0.2, 0.58, 0.82, 0.2, 0.58, 0.82, 0.2, 0.58, 0.82, 0.2, 0.58, 0.82, // v0-v1-v2-v3 front
0.5, 0.41, 0.69, 0.5, 0.41, 0.69, 0.5, 0.41, 0.69, 0.5, 0.41, 0.69, // v0-v3-v4-v5 right
0.0, 0.32, 0.61, 0.0, 0.32, 0.61, 0.0, 0.32, 0.61, 0.0, 0.32, 0.61, // v0-v5-v6-v1 up
0.78, 0.69, 0.84, 0.78, 0.69, 0.84, 0.78, 0.69, 0.84, 0.78, 0.69, 0.84, // v1-v6-v7-v2 left
0.32, 0.18, 0.56, 0.32, 0.18, 0.56, 0.32, 0.18, 0.56, 0.32, 0.18, 0.56, // v7-v4-v3-v2 down
0.73, 0.82, 0.93, 0.73, 0.82, 0.93, 0.73, 0.82, 0.93, 0.73, 0.82, 0.93, // v4-v7-v6-v5 back
]);
// 法向量
var normals = new Float32Array([ // Normal
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // v7-v4-v3-v2 down
0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0 // v4-v7-v6-v5 back
]);
// 頂點索引
var indices = new Uint8Array([ // Indices of the vertices
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right
8, 9, 10, 8, 10, 11, // up
12, 13, 14, 12, 14, 15, // left
16, 17, 18, 16, 18, 19, // down
20, 21, 22, 20, 22, 23 // back
]);
// 創建緩衝區
var indexBuffer = gl.createBuffer();
if (!indexBuffer) return -1;
// 將頂點和顏色數據寫入緩衝區對象
var v_num = initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position');
var c_num = initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color');
if (!v_num || !c_num) {
console.log('初始化緩衝區失敗！');
return -1;
}
// Unbind the buffer object
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
return indices.length;
}
// 初始化緩衝區對象
function initArrayBuffer(gl, data, num, type, attribute) {
// 創建緩衝區
var buffer = gl.createBuffer();
if (!buffer) {
console.log('創建緩衝區失敗!');
return false;
}
// 寫入數據到緩衝區
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
// 將緩衝區對象分配給屬性變量
var a_attribute = gl.getAttribLocation(gl.program, attribute);
if (a_attribute < 0) {
console.log('獲取變量存儲地址失敗' + attribute);
return false;
}
gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
// 啓用緩衝區屬性變量
gl.enableVertexAttribArray(a_attribute);
return true;
}
}())
</script>
</html>