Place a mesh in the same location on screen regardless of window size

Questions
,
1

Hello, I have two scenes. One for the hud using the orthographic camera and another for the general scene using the perspective camera.

I have a legend on the hud scene that I would like to place always in the top left corner, regardless the canvas size (i.e. if I change the window’s size, then the legend will stay in the intended place). How can I achieve that ?

Thanks

2

Do it like in this example with THREE.Sprite: three.js webgl - sprites

Check out how the red circles are always rendered at the same position relative to the window. The relevant code is in createHUDSprites() and updateHUDSprites():

function createHUDSprites( texture ) {

	var material = new THREE.SpriteMaterial( { map: texture } );

	var width = material.map.image.width;
	var height = material.map.image.height;

	spriteTL = new THREE.Sprite( material );
	spriteTL.center.set( 0.0, 1.0 );
	spriteTL.scale.set( width, height, 1 );
	sceneOrtho.add( spriteTL );

	spriteTR = new THREE.Sprite( material );
	spriteTR.center.set( 1.0, 1.0 );
	spriteTR.scale.set( width, height, 1 );
	sceneOrtho.add( spriteTR );

	spriteBL = new THREE.Sprite( material );
	spriteBL.center.set( 0.0, 0.0 );
	spriteBL.scale.set( width, height, 1 );
	sceneOrtho.add( spriteBL );

	spriteBR = new THREE.Sprite( material );
	spriteBR.center.set( 1.0, 0.0 );
	spriteBR.scale.set( width, height, 1 );
	sceneOrtho.add( spriteBR );

	spriteC = new THREE.Sprite( material );
	spriteC.center.set( 0.5, 0.5 );
	spriteC.scale.set( width, height, 1 );
	sceneOrtho.add( spriteC );

	updateHUDSprites();

}

function updateHUDSprites() {

	var width = window.innerWidth / 2;
	var height = window.innerHeight / 2;

	spriteTL.position.set( - width, height, 1 ); // top left
	spriteTR.position.set( width, height, 1 ); // top right
	spriteBL.position.set( - width, - height, 1 ); // bottom left
	spriteBR.position.set( width, - height, 1 ); // bottom right
	spriteC.position.set( 0, 0, 1 ); // center

}
3

When I try this, I discover that colormapMaterial.map.image is undefined. Has that attribute been changed?

4

No, the above code should still work.

5

Is this the code corresponding to your link above?

If so, when I try running it (to debug why my positioning isn’t working), I hit the following error on the line

sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );

The error is:
TypeError: Cannot read properties of undefined (reading 'topLeft')

6

For otho camera:

sprite.position.set( - width, height, 1 ); // top left
sprite.position.set( width, height, 1 ); // top right
sprite.position.set( - width, - height, 1 ); // bottom left
sprite.position.set( width, - height, 1 ); // bottom right
sprite.position.set( 0, 0, 1 ); // center
7

That code from 2012 year

8

Yeah I realized I somehow ended up looking at an old fork (top hit on google for some reason). This is more recent https://github.com/mrdoob/three.js/blob/51233b6cbb83b4cbaaa59566caf629f761640a1d/examples/webgl_sprites.html

Can someone please clarify what setting the scale does e.g. spriteTL.scale.set( width, height, 1 );?

I ask because I don’t see anything in the documentation here three.js docs

And when I try setting the position without setting the scale, my sprite disappears. I’m specifically doing:

sprite.position.set( - window.innerWidth / 2, - window.innerHeight / 2, -1 ); // bottom left