Scaling PlaneGeometry starts from the center not left

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.

https://jsfiddle.net/19u6th3n/4/

Here you go:

https://jsfiddle.net/19u6th3n/5/

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;
2 Likes

according to my tests. the bar just moves to the left. And starts scaling left and right from there.

https://jsfiddle.net/19u6th3n/7/

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.

https://jsfiddle.net/19u6th3n/12/

1 Like

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.

Thanks

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 ];

And this

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