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.
That is impressive.
I am usually the one supplying working arounds in tickets. But I am met with some swift and to the point responses.
I figured as much. So the scale and position have to be updated together. I was hoping to not have to do that.
Is there better ways to do this than using multiple geometry / meshes ?
What’s wrong with different meshes?
Also, I would just do this…
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;
mesh.scale.x = 100;
according to my tests. the bar just moves to the left. And starts scaling left and right from there.
The geometry is this to keep it a bar shape
new THREE.PlaneBufferGeometry( 2, 0.2 );
For some reason this is working. I had to apply a different translate to the back bar. It now doesn’t require position updates.
I’ve seen no such thing to act as a slider with raycaster control ? .
There is certainly nothing on this resource. So of course it’s not common.
It’s supposed to work in WebVR mode.
What projects are you talking about ?
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.
Yes I know. I did look.
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.
What? I didn’t mean any of that.
It’s all ok. I got the answer I was looking for. It is working perfectly so thankyou.
If there is a specific slider feature that works in WebVR I’m also interested.
Sorry to bring up an old posts. I have finally discovered how to use Morph targets.
How is it possible to morph the x position of the top planegeometry to match the bottom planegeometry ?
There is this
geometry.morphAttributes.position = [ geometryScale.attributes.position ];
mesh.morphTargetInfluences[ 0 ] =
But can’t work out what value I am supposed to give it. And which target influece I am supposed to update as there is 4 of them ?
I am currently using a percentage to scale the geometry. Would this be smoother and faster to do morphing ?
I’m so sorry lol I have bad interpretation skills