Adding clickable markers on a rotating globe W/OUT using Orbit Controls

Questions
1

Trying to put multiple markers on a globe and have them rotate around the globe. Most examples I’ve seen utilize Orbit Controls but due to the nature of the project I’m better off using a different control method that transforms the 3D object, not the scene. Only problem is the markers aren’t sticking to the object anymore. I’ve made them a child of a container object that holds the globe and the markers, but the markers just rotate by themselves. Any help would be appreciated! The markers are board objects with pic attached (pic not featured in codepen example).

https://codepen.io/pfbarnet/project/editor/DQEbWg

<3

2

OrbitControls does not transform the scene. It transforms the camera.

Try to use THREE.Sprite for your markers like in this example:

https://threejs.org/examples/webgl_sprites.html

3

Got it, thank you! I ended up using:

  //sprites
      var spriteMap = new THREE.TextureLoader().load( "arrow.png" );
      var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );
      var sprite = new THREE.Sprite( spriteMaterial );
      sprite.position.set(1,5,0);
      mshBox.add( sprite );

Adding the sprite to the globe object (mshBox), now it rotates on the face of the object, rather than its own axis.

4

I just wanted to revisit to and update my progress and ask another question. If you refer to the updated codepen below (I caved and got a pro account so I can upload images), the marker is successfully added to the rotating globe. I’m using ObjectControls.js which is a wonderful solution to drag rotation w/out using orbit controls, which allows a lot of benefits such as global lighting vs. baked-on-the-object.

I’ve googled my heart out but I’m just too much of a noob to solve this: how do I use raycaster to make my marker sprite clickable? Basically when clicked I want to either bring the user to an external website or have some other element pop up onscreen. But first I just need to get the sprite clickable in some fashion. Any help would be greatly, greatly appreciated.

<3

5

Nevermind, figured it out! I should probably give myself more time before posting noob questions! I’m using this handy fiddle as a blueprint for raycasting my marker.

updated pen:

1 Like