Drawing 2D image from a 3D position

Questions
,
1

I have a point in 3d space, its just a position and its not an object, say for example the left side point of an object or something.

I also have 2D sprite rendered in a separate scene that is rendered using an ortho camera.
I want to convert the 3D point to the Ortho projection so that i can draw a 2D image in that 3D point,
From what i see in the existing samples like this one: three.js - Converting 3D position to 2d screen position [r69!] - Stack Overflow

it converts a 3D position of an Object to 2D, but it doesnt seem to work for me.

How should i do this?

summary, i have a 3D point (example a position in the world), i want to render a 2D image in that area, more like a 2D gizmo in the UI, currently all UI/HUD elements are in Ortho camera separate from 3D perspective camera.

2

Not sure if I understood correctly - but wouldn’t using a CSS3DRenderer (or CSS2DRenderer) make more sense than using a separate scene with an orthographic camera?

That way you should be able to put the image in a HTML element and just place it in any location in the 3D space.

3

if you want to do this with complete freedom, then use a plane and a shader that always aligns the plane in the xy direction.

	const uniform = {
      tDiffuse: {value: "your texture"},
    },
		
	
    const Shader = new THREE.ShaderMaterial({				
	  uniforms: uniform,			
  	  vertexShader: VS,
  	  fragmentShader: FS, 
    }); 
	
    const planegeometry = new THREE.PlaneBufferGeometry(1000, 1000, 2);
	const.mesh = new THREE.Mesh(planegeometry,Shader);		
    "your Object".position.copy(mesh.position);

and the shader:

VS = `

varying vec2 vUv;

void main() {

	vUv = uv;
	
	vec4 modelViewPosition = modelViewMatrix * vec4(vec3(0.0), 1.0);
	modelViewPosition.xy += position.xy;
	gl_Position = projectionMatrix * modelViewPosition;
	
}`;


FS = `
		
uniform sampler2D tDiffuse;		
varying vec2 vUv;
		
void main() {

	vec3 diffuse = texture2D(tDiffuse, vUv).rgb;
	gl_FragColor = vec4(diffuse, 1.0);
					
}`;

if you want to update the uniforms you have to use “this” instead of const when working with classes.
then you can e.g. so change the uniforms. for example if you defined “uniform opacity”.

in your update:
this.mesh.material.uniforms.opacity.value = “your value”
this.mesh.material.uniformsNeedUpdate = true;