Using shader x, y, z coordinates relative to the tilted object and not the scene in Three JS

Questions
, , ,
1

Hi I am animating the x,y,z coordinates of vertices in a sphere like manner with horizontal rings around the centre as attributes on a THREE.Points() object. It uses a MeshStandardMaterial() and I have then tilted the Points object slightly along the z axis with points.rotation.z = 0.2. Everything is as expected as shown below:

globe-a
globe-a1920×990 269 KB

When I swap the MeshStandardMaterial() for ShaderMaterial() and rewrite the animation part into a shader the z tilt on the points object has gone. I have checked with an axis helper on the Points object and what appears to be happening is the object is still tilted but the shader animation is ignoring the tilt and is moving the vertices around the x, y, z coordinates of the scene rather than the tilted Points object.

As you can see in the picture the sphere and outer ring of particles should all be tilted on the same angle as the axis helpers which is attached the the tilted points object, however they are not tilted, only the axis helpers are tilted

globe
globe1920×1192 353 KB

.

Is there a quick fix for this or do I have to change the shader animation and factor in an overall rotation there?

Thanks.

2

/cc

3

I would go with modification of PointsMaterial (not MeshXXXMaterial or ShaderMaterial), with Points: https://codepen.io/prisoner849/pen/RwyzrVj?editors=0010

изображение
изображение1920×1080 448 KB

1 Like
4

Thanks very much for helping and going to the trouble of putting together a demo for me! Looks like I’ll have to rewrite the animation again. I’m fairly new to Three JS and shaders so your script doesn’t look like something I recognise yet and I didn’t realise you could use shaders with PointsMaterial or anything other than ShaderMaterial and RawShaderMaterial. I’ll work it out from your code thanks. Can I just ask; Do you loose any performance advantages from using PointsMaterial rather than ShaderMaterial?