How to get the color of a position of canvas screen in 3D scene

belopot · January 20, 2021, 3:22pm

Hello everyone!
I’m looking for the way to get the color of a position of canvas screen in 3D scene.

As you can see the screen shot, when I move the mouse cursor on the art, I want to get the color of picked position by mouse cursor.
Thank you

Mugen87 · January 20, 2021, 3:35pm

Have you considered to used a similar approach like this official example:

https://threejs.org/examples/webgl_read_float_buffer

The idea is to extract the color value from a render target via WebGLRenderer.readRenderTargetPixels().

belopot · January 20, 2021, 3:47pm

Cool. thank you

felixmariotto · January 20, 2021, 10:14pm

@belopot you can also do like this :

github.com

felixmariotto/canvas_picking_example/blob/6b96d2adc1fae57895884f191f3a991012df4737/src/index.js#L54-L103


	window.addEventListener( 'click', (event) => {
		// check intersections with imported model
		mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
		mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
		raycaster.setFromCamera( mouse, camera );
		const intersects = raycaster.intersectObject( obj, true );
		// if there is any intersection, continue
		if ( intersects.length ) {
			// get pixel coordinates on texture
			const uv = intersects[0].uv;
			uv.x *= img.width;
			uv.y *= img.height;

This file has been truncated. show original

belopot · January 21, 2021, 8:41am

Awesome! thank you Felix.

Topic		Replies	Views
How I can get position of canvasTexture by raycast on 3d object Questions canvas-texture , raycasting	1	2425	September 13, 2019
[SOLVED] What is the easiest way to get the color of a pixel rendered on a texture? Questions render-target , webglrenderer	3	7850	June 28, 2020
How to get texture color at intersection with Raycast? Questions textures , materials , raycaster , raycasting	8	2807	June 3, 2022
Color picker in canvas? Questions canvas	1	619	March 16, 2021
How to read color from an MTL? Questions materials , mesh	18	1450	July 17, 2022

How to get the color of a position of canvas screen in 3D scene

Related topics