Hello community, I am in new in THREE.JS and graphics system. I want to achieve something like attached in the image.
I have two image, from which i created two sprite object.
I have 3 point A, B, C. My sprite1 length is BA, and sprite2 length is AC. Both of my sprites are comnected at point A. However these sprites have their own different rotation, means angpe between B,A is not equal to angle between A,C. These rotation occurs independently. I dont know how to achieve it. Since we cant define position of s sprite using two point, we can only define one point as position for a sprite, where the center of the sprite sits on that position (if i am not wrong).
So far what i did to position my sprites in between two points.
pointBV= pointB.project(camera)
pointAV = pointA.project(camera)
diff = pointBV-pointAV
sprite1.rotation = Math.atan2(diff.y, canvasRatio*diff.x)
midpoint = pointBV.lerp(pointAV, 0.5).unproject(camera)
sprite1.position = midpoint.
sprite1.scale.setY(pointB.distanceTo(pointA))
Similarly i calculated the rotation and position for sprite2.
My camera is looking at pointC (bottom of sprite2)
The issue i found,
- The update/animation is not smooth. Sometimes it seems that sprite1 and sprite2 are updating separately. Though they are connected at pointA, but it doesnt seem like they are connected at A. But they should be always connected at A. (N.B. BA= constant and AC = constant)
- Sometimes i found that my positioning of sorite dont work. How I know? I also plotted a PointMesh in all my A, B, C points. Sometimes i see that my points in one position but my sprite is being rendered in another position
My current settings:
- I use renderOrder, sprite2.renderOrder = 1
- Since i am using png file as sprite texture, its hard to define that single point in a image. How we do define the image center of a png image? (By default it is the center of the image). However i kept the right side of image blank in such a way that my actual object points are at the image center. (Let me know if better solution is there)
- My points A,B, C are coming from real world coordinates system, 3D, XYZ points. Where Z axis is top direction, i mean perpendicylar on XY plane. For rendering those points in 3JS i just swapped Y,Z value.
Is there anyone who can help/suggest? Please. Thank you.