Hi, I am new to ThreeJS. I am looking for a solution for a long time, didn’t find out any, so posting here. Basically I have two points in my scene, marking yellow and red and I have a sprite object. I can place the Sprite Object at any given point (either red or yellow). But I need to place/position my sprite object in such a way the its one end is at yellow point and another end is at red point. Now both of the points are dynamically updating continuously in animation loop. So when I set my camera to look at the red point is is always at the center of the screen, and yellow point moves around. Similarly if I look at yellow point, the red point moves around. Now I need to place one end of my sprite either at red or yellow point and rotate the sprite in such a way that its other end meets at yellow point. How can I do that? The distance between red and yellow point is not also same always, so I need to adjust the size of my sprite as well to meet the other point.
hi @tfoller thanks for your reply. As to the given image, I want to position my shovel handle at red, and shovel head top edge at yellow. I have already modified my image in such a way that the shovel handle is the center of the image, so whenever i put the sprite in the scene, the shovel handle is at the red position. Now I just want to position my shovel top edge to the yellow point.
N.B. I have created the sprite texture with TextureLoader with a svg image and changed its viewport so the handle of the shovel is now at the red point.
Thank you
Hi @tfoller Thank you so much for your help. I do believe it works just fine and needed very much. Though I don’t understand most of the part, I am trying to understand what you actually did, so that I can bit modify on my own. But thank you so much.
Hi, I looked into that and it is quite easy. Thank you for the solution. As I understood, you set the position of the sprite at the mid point between two known points and then scaled the sprite so that it s edge meets those two points, right? And another thing is the center of rotation for an image sprite is also the center of the image, so the sprite is rotating along the center of the sprite object, if I am not wrong. But what if I want to rotate the sprite along one of the two edge points? How can I achieve that? I want to change the center of rotation of the sprite to one edge point and rest of the things are same. How to change the rotation center of sprite?
My Solution: I have thought of a solution for that. I will not change the sprite center rather what if I double the size of the image (sprite) so that one edge of the image is at the center of the image and I position the sprite at one known point. But in that case the scaling and rotation you have calculated will not work I guess. Any idea?
For your reference, lets say I have updated my png like this. So one edge of the blue arrow is now at the image center. Now if I use this image as a sprite, so one edge of the blue arrow will be my rotation center, right? Now I dont want to position the sprite at the mid point, rather I want to position the sprite at one known point(out of two) on scene so that the one edge of the blue arrow is set at that point, after that I want to rotate and scale the sprite so the another edge of the blue arrow meets the other known point and rotate same. I am sorry if I cant make you understand what I am looking for.
the only reference scale is the distance between the two points in NDC space, you can change it if you have any other measure, like make it twice smaller for example:
Hi, sorry for bothering again. I have a simple inquiry. I have seen you are projecting the points, and finding the points difference after that. Can it creates parallax error? Can we do the same without projecting the points? The reason I am asking it because, I have the coordinates of the points in world coordinates upto 10/12 decimal places. So when I get the difference between the points in WCS it is +/ 0.001 error at a given time. But When I use it in NDC, the distance error is upto ± 0.2. So what happens is that, as I am scaling the object in respect to this distance measurement, so with ± 0.2 difference between two points is looks much, I mean I can visually see that my object is getting compressed/squeezed, and again getting bigger. But which should not be, as the height pf the sprite is constant(in reality, though in animation WCS it might have ±0.001 updown)
You should probably make a different question about precision loss when projecting points to NDC space, since it’s not specific to this task, that has been solved.
Maybe also make a simple fiddle example showing the issue.
Can you please let me know how these first 3 lines work? And what is the purpose of these lines? And also why are we multiplying the x axis with the canvas ratio? Or how can i visualize all these vectors, so that understand myself.
Hi @tfoller thank yoy so much. The issue was resolved. I have a question similar to this. Will it also work for a 3D model instead of sprite? I have a 3D model loaded using GLTF loader. Instead of sprite I want this 3D model to be placed between these two points and rotate accordingly.
The short answer is no, it’s not going to work. Sprites are 2D rectangular shapes that are always parallel to the camera’s near plane, 3D models are nothing alike in this sense.
You need to write a different code if you want two custom points on the surface of your model to match your points A and B (via proper scaling and rotation of the model).
