New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Best way to render 3D markers #90
Comments
@danman335 thanks for reaching out. I'd recommend using the Objects Layer for this. That will give you maximum flexibility on how to customize those pin objects. |
Thanks @vasturiano I got it mostly working, only thing I've hit a blocker on is that if I have multiple locations in my objectsData but only one object is rendered onto the globe, I think its to do with me misunderstanding how gtlf loaders and scenes work but is there anything obvious to be done differently here:
This is my data and the result:
|
@danman335 it should suffice to do If you use the accessor function ( Leaving out the accessor function cause the module to clone the object for each item. |
@vasturiano thanks, I got that - working now thanks. Final question (I promise) - trying to alter the individual rotations of the objectThreeObjects, at the moment they all share the same rotation properties. If I log myGlobe.objectsData() I can see my individual objects with a reference to the underlying __threeObj but I can't see how to update the rotation of each point individually. Any pointers would be amazing thanks. |
@danman335 glad you got the markers to work. In order to rotate the objects you need to manipulate the In principle you should be able to use each object's lat,lng coordinates to calculate what the rotation angle of each object should be. |
Hey @vasturiano yeah I found the docs on rotation - what I'm not understanding is how to manipulate the rotate for each individually. I can't access the __threeObj on each individual object, and updating within my loader applies the properties to each object
i.e. whats the best way to access the Object3D properties/methods for the objects created passed in via objectsData? Thanks |
You can use the myGlobe.objectThreeObject(item => {
const obj = marker.scene.clone();
obj.rotation = /* compute based on item */;
return obj;
}) |
Thanks thats exactly what I was trying to do amazing @vasturiano! Last question (promise) as each object is a child of a group I cannot get them to lookAt the centre of the globe. Setting lookAt to 0, 0, 0 for each child just looks at the origin of the group that its within. The origin of the globe is 0, 0, 0 so thats why it isn't working, can we move the meshes out of the groups into the scene to do this or would that not work? I'm trying to get the objects to stand perpendicular to the surface of the sphere similar to how the columns do in the points layer. |
@danman335 that's more of a question on the scope of ThreeJS itself, but I'm guessing you need to the rotation of the object in the world context, not local. Perhaps you can get the current object rotation in world units and propagate that to your own, via getWorldQuaternion. Maybe you need to convert the globe center to local coordinates before using it, like: const globeCenter = myGlobe.scene().localToWorld(new THREE.Vector3(0, 0, 0));
...
obj.lookAt(globeCenter); |
Hi,
I've setup a globe and styled etc - looking now at the best way to render 3D map markers that rise off the earth perpendicular to its surface. Is there anyway to change the column that is generated by the pointsData or would I better adding custom objects with objectsData in the objects later.
Example of below of what I'm trying to emulate:
The text was updated successfully, but these errors were encountered: