Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@gordonnl
Last active February 4, 2021 17:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save gordonnl/5bf38741a35e6ecce332 to your computer and use it in GitHub Desktop.
Save gordonnl/5bf38741a35e6ecce332 to your computer and use it in GitHub Desktop.
Hit test in threejs for skinnedMesh using RTT
/*
*
* Render current frame and check pixel
* transparency beneath mouse position.
* Threejs required.
*
*/
var gl = renderer.context;
var rtTexture = new THREE.WebGLRenderTarget(WIDTH, HEIGHT, {minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat});
var pixel = new Uint8Array(4);
var framebuffer;
var onMouseDown = function(e) {
// Render to texture
renderer.render(scene, camera, rtTexture, true);
// Bind frame buffer to inspect
framebuffer = rtTexture.__webglFramebuffer;
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
// Inspect pixel at mouse coords, pass results to pixel variable
gl.viewport(e.clientX, HEIGHT - e.clientY, 1, 1);
gl.readPixels(e.clientX, HEIGHT - e.clientY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
// Unbind frame buffer
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
console.log(pixel); // rgba values
console.log(!!pixel[3]); // True if not transparent
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment