In my scene, I have an object (a pen) that rotates around its axis in the render loop using the following code:
groupPen.rotation.y += speed;
groupPen.rotation.x += speed;
Additionally, I have a TrackballControls that allows the user to rotate the entire scene. Now, I want to determine the actual position of the pen (or its tip) and place small spheres to create a trail behind it.
This entails knowing where the camera is focused and positioning the trail spheres behind the pen tip while excluding them from the animation and TrackballControls.
I attempted the following:
groupSphereTrail.lookAt(camera.position);
However, this did not yield any results.
camera.add(groupSphereTrail);
When I tried this, the groupSphereTrail was positioned outside the view area, and adjusting its position.z did not make it visible.
Another approach I considered was using a raycaster to create a trail behind the pen. By sending a ray from the camera's center through the pen tip, I hoped to draw the trail. Yet, this method still did not provide me with the true position.
Another idea was to generate a 2D vector of the pen tip's current position and overlay an HTML element on top of the canvas:
var p = penPeak.position.clone();
var vector = p.project(camera);
vector.x = (vector.x + 1) / 2 * width;
vector.y = -(vector.y - 1) / 2 * height;
Unfortunately, this approach also failed to deliver the desired outcome.
Is there another effective solution for this issue?
To view the current progress, visit: (click on the pen cap to see the writing trail, which should remain in place even when rotating the camera).