I have n interesting problem that i wanted to see if i can get some help figuring out. Basically my issue is how to transpose the targets for a given cell on that cell using my sprite image. Let me give you some more explanations: i have a cells png image that i am rendering on the screen as follows using a sprite:
The red dots on this screen are some of the points that i want to transpose on their respective cells using their real microscope coordinates. The problem is they have the exact same pattern as the cells but they are not fully transposed on the cells and they are on the top right corner of the screen. Let me show you the final picture below:
Here i had to move the sprite via mouse and now you can see those points on the upper right hand corner of the screen. The pattern of these red dots follows the exact same pattern of the cells on the sprtie image. But they are just way off. There is something that I am missing in ths picture to make sure I can transpose those red dots exactl on their respective cells using their real coordinates. I dont know if I have to some how move the sprite somehow to match them or not. But frankly I am out of ideas. I could always adjust the x and y coordinates to transpose them artificially. But that is not an exact match either. I guess the issue i have is similar to having a map image that you want to put a point ofr a circle on a given city in that image. What is the correct technique for puting meshes on an image of cells or for that matter image of a map with cities that you want to anoint each city with a circle on top of it.
I hope I have been able to describe the issue adequately. Look forward to all your good insight on this issue.
BTW: I am using a textureloader to load my png image.
An update to this thread"
I was able to get the points to match the image by moving the sprite to center as such:
sprite.center.set(0, 0);
So now all little targets lay on top of each cell correctly using no scaling in any of them. The only problem i am facing now is that the whole scene is now shifted to upper right corner like the picture below:
So obviously i can drag the scene back manually with my mouse to see the entire scene. But I want it to be centered programmatically. I tired camera.lookat and camera positioning by changing x,y,z params but it did not work. I need to move the entire group that has the sprite and the little red dots to the center. Any sugesstions as to how i can move the group so initially it is not off the screen.
I think this problem is a bit more complex than you might realize, since the dimensions of the viewport and camera settings also affect how this transformation needs to be done.
If you’re using an orthographic camera, it may be simpler.
To convert from 2d screen coordinates to world space, there are “project/unproject” methods on the camera.
How is the grayscale background image displayed… are you setting scene.background? or is it a plane with a material+texture on it?
If you could create a glitch or jsfiddle with your setup and sample data it might be easier to help.
Thanks for your response. Unfortunately there is a lot of code in the file that creates this and not [ossible to create a jsfiddle as it depends on api calls. But i try to put the code fragments here:
The camera is perspective camera. It looked worse when i switched to orho.
// read an image from api and create a texture
const url = URL.createObjectURL(new Blob([ multiFovData[selectedFovIndex].rawdata ], { type: 'image/png' }));
let texture = new THREE.TextureLoader().load(url, ()=>URL.revokeObjectURL(url));
texture.colorSpace='srgb'; // get rid of the halo around cells
// create sprite material
var material = new THREE.SpriteMaterial( { map: texture, color: 0xffffff, fog: true } );
var m = material.clone();
// create sprite
var sprite = new THREE.Sprite( m );
// IMPORTANT LINE BELOW: set sprite center to 0,0 coordinates: Very important line. This fixed the issue of red dots not overlaying 100 percent correctly. but caused the sprite to go off screen**
sprite.center.set(0, 0);
// Add to group
group.add( sprite );
after this code I draw the red dots based on some api call. The data contains x,y,z coordinates for each red dot. So i just create a mesh and add it to the same group. I thought there is no need to show this code since it is boiler plate stuff. But if you want i can add it as well. My bigger questions is why cant i just move the entire group? Is there no way to move a group.
The grey scale background is the actual png image with the cells on it. All the same image. it is a plane with a material+texture on it as you can see in the code fragment above.
Thanks again for your help
Thanks @manthrax. I have used raycasting so i am familiar with that but not familiar
with unproject concept in the context you are talking about. Is there any examples that I could look at or may be any relevant article that you know of. So I can familiarize my self with this concept more. I am assuming this is in relation with raycasting on a sprite image or is it some thing else?
It turned out the issue was solved easier than I thought. I just had to reposition the entire group to the correct area of the scene with the followng statement:
