I am trying to scale a PlaneGeometry bar to act as a progress bar slider. I’ve not seen any demos of this before. Even datGui use canvas.
When I try to scale the front bar over the background bar. it starts from the middle. I can’t work out why I have to use fraction scaling values , but as you can see from this fiddle it it scales from the centre not left.
You might have to move the camera around.
Any ideas ?
My intention is have the bar scaling from left to the same scale as the background bar.
var geometry = new THREE.PlaneGeometry( 1, 1 );
geometry.translate( 0.5, 0.5, 0 ); // offset geometry so center is on 0, 0
var mesh = new THREE.Mesh( geometry );
mesh.scale.x = 100;
Sorry, that wasn’t worded correctly. I was saying, your project has been done before (or at least this part of it), you’d just have to search for it to find it.
I don’t know where the “common practice” crap came from.
Kindly, disregard that.
The only thing close is the sliders in datgui and it seems to be using canvas ? I’m actually not sure how it works personally as it’s all convoluted and not a module.
This seems to be working after i’ve changed the scaling more. It’s enough for now.
I am trying to build video controls. I’ve already got the buttons working using the MSDF text rendering solution working for webfonts so they can be reused.
I guess using this method for now and scaling the mesh will work. I have to work out how to determine global to local coordinates to scale the bar now.