I have a use case in threejs to dynamically hit a point using mouse click on an object to add in labels. Currently I am using raycasting, but raycasting’s intersect point seems to not work correctly when the object is scaled.
Please follow the fiddle, it creates dynamic annotation. Uncomment the cube scale line to see the annotation are positioned further away.
Please could someone help:
How to get the sprite material position correctly when the object is scaled?
2)Sprite cannot be used with glTF, is there a example on how to convert sprite material to be used with glTF?
3)how can i position the camera to the face where the mouse click coordinates on the object?
You have a comment in your code: //adding to scene does place sprite
However you will need to add the annotations to the scene so they are not affected by the object’s scale values, which was stretching the annotation.
Here is a fiddle where instead of adding to the object, I have added to the scene and displaced the position by 120% to move it out from the cube’s edges https://jsfiddle.net/c524vghm/
Thanks @calrk for your reply. In my actual project the user will be rotating & transforming the object (not the scene). To add to the complexity there could be more than one object as well in the scene. Adding annotation to the scene will not transform the annotation when the object is moved or rotated , as it is not a child of the object . Any ideas how i can achieve that ? Thanks
Yes, you could have an object in between the scene and your mesh that can be moved around the scene.
The problem will be when scaling the object, you want to move the annotations but not scale them which would cause them to stretch. Do you need to scale your objects? If so would probably have to have a separate watcher updating the annotation positions based on the object’s transform.
Thanks for your response.
Sorry! I don’t understand ‘you could have an object in between the scene and your mesh that can be moved around the scene.’ . Please are you able to show an example.
Sorry! If the below doesn’t make sense - I am kind of new to threejs. I was looking for a way to focus the camera on the point in which the mouse coordinates where . This will help to place the sprite material (annotation) all the time.
I suggest reading up on how a scene graph works in 3D programs to help, but an example of what I am talking about is below.
You would add the mesh and the sprite to the parent object, and transform the parent object around rather than the mesh.
var annotation = new THREE.Sprite();
var mesh = new THREE.Mesh();
var parent = new THREE.Object3D();
parent.add(annotation);
parent.add(mesh);
scene.add(parent);
Creating a parent object to place the annotation has solved the scaling issue - thankYou so much.
I had earlier tried using group that didn’t work. Thanks a lot your tips have helped to make the annotation much more precise.
There are few issues as i would like to add the sprite material to be as glTF and not sure how can i go about converting sprite material to be in glTF format.
Thanks for your time!