Skip to content

Instantly share code, notes, and snippets.

Last active February 4, 2021 17:49
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
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