Can you stop the map marker rotating with the globe?

[mledwards]

I'd like for the map markers to be forward facing at all times. Is this possible?

[birdm4n]

You can create a custom marker renderer that uses THREE.Sprite instead of geometry (quads, spheres). That's how I achieved forward facing markers (with a custom png) to have forward facing Icons on the globe.

[mledwards]

Ah, thank you. Do I still have to return a Mesh if I'm using a sprite?

[birdm4n]

Just return the sprite instead of the mesh. Here's parts of my code:

import * as THREE from "three";

import { Marker } from "react-globe";

import plusButton from "./assets/img/01_a_Plus_Button.png";


const MarkerRenderer = (marker: Marker): THREE.Object3D => {


  var spriteMap = new THREE.TextureLoader().load(plusButton);
  var spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap });


  var sprite = new THREE.Sprite(spriteMaterial);

   return sprite;
};

export default MarkerRenderer;

[mledwards]

Hmm, that's what I was trying, but it's not displaying. Thank you for the support by the way.

import pin from "./pin.png";

export default function markerRenderer(marker) {
  var spriteMap = new THREE.TextureLoader().load(pin);
  var spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap });
  var sprite = new THREE.Sprite(spriteMaterial);
  return sprite;
}

[birdm4n]

Try drawing it on top so you're sure it's not hidden behind the globe:

// DRAW ALWAYS ON TOP
  spriteMaterial.depthWrite = false;
  spriteMaterial.depthTest = false;
  spriteMaterial.renderDepth = 1e20;

Perhaps you also need to scale the Sprites a bit.

[mledwards]

That's still not showing 🤔

[gmmakqa]

Try sprite.scale.set(30, 30, 30); or whatever scale works for you. The sprites are 1 x 1 when instantiated I think - they're probably working, you just can't see them because they're so small.