Hi everyone, I recently came across this interesting example using three.js HERE. While exploring the example, I stumbled upon a function that caught my attention:
// This function is responsible for positioning the 5 static red dots
function updateHUDSprites () {
var width = window.innerWidth / 2;
var height = window.innerHeight / 2;
var material = spriteTL.material;
var imageWidth = material.map.image.width / 2;
var imageHeight = material.map.image.height / 2;
// The following lines position the 5 static red dots
spriteTL.position.set( - width + imageWidth, height - imageHeight, 1 ); // top left
spriteTR.position.set( width - imageWidth, height - imageHeight, 1 ); // top right
spriteBL.position.set( - width + imageWidth, - height + imageHeight, 1 ); // bottom left
spriteBR.position.set( width - imageWidth, - height + imageHeight, 1 ); // bottom right
spriteC.position.set( 0, 0, 1 ); // center
}
This function essentially aligns all 5 PNG images. Although I have experimented with the code extensively, I am still puzzled by how the centering process works. Take, for instance, the following line:
spriteC.position.set( 0, 0, 1 ); // center
After playing around with the example, I realized that the above code actually centers the image. But I'm unable to comprehend the values passed to the position.set() function. If someone could explain how spriteC.position.set( 0, 0, 1 ); achieves centering of the image, I would greatly appreciate it.