Globe.GL & Three.JS Object?

I'm currently working with Globe.Gl to create a check in system, for someone's live stream.
I'm currently struggling to figure out how to add a custom 3D Object? Or a custom Object in general as part of a point made on the globe.

Earlier I was using Markers, but would like to make the markers or something like it in 3D.
So it hovers above the point. Which would display the users name, and image from the bot currently being used.

I'm not too familiar with Three.JS or JS in general. So I occasionally use Chat GPT to help.
While sometimes it's useful, it's not always helpful of course.

I would also like to figure out how to approach depth stacking/layering
(image attached from a Three.JS forum post)

Below is Globe.Gl
https://globe.gl/

Below is the script I'm currently working with, that last worked. Without attempting the custom 3D Object

<script src="https://unpkg.com/globe.gl"></script>
<script src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const globeContainer = document.getElementById('globeViz');

      const pointMarkers = [];
      const spriteMarkers = [];

      const globe = Globe()(globeContainer)
        .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
        .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
        .backgroundColor('#000000')
        .pointLat(d => d.lat)
        .pointLng(d => d.lng)
        .pointColor(d => d.color || '#9146FF')
        .pointLabel(d => d.label || d.user || '')
        .pointAltitude(0.06)
        .pointRadius(0.2)
        .pointsMerge(false)
        .pointsData(pointMarkers)
     
      const params = new URLSearchParams(window.location.search);
      const client = new StreamerbotClient({
        host: params.get('host') || '127.0.0.1',
        port: params.get('port') || ''
      });

      client.on('General.Custom', (payload) => {
        if (payload.data?.event !== 'LocationPin') return;

        const d = payload.data;
        console.log('📍 Incoming check-in payload:', d);

        if (!d.lat || !d.lng || !d.user || !d.avatarUrl) {
          console.warn('❌ Missing required fields in payload.');
          return;
        }

        const point = {
          lat: d.lat,
          lng: d.lng,
          user: d.user,
          color: d.color || '#9146FF',
          label: d.user
        };
        pointMarkers.push(point);
        globe.pointsData([...pointMarkers]);

        const sprite = {
          lat: d.lat,
          lng: d.lng,
          avatarUrl: d.avatarUrl
        };
        spriteMarkers.push(sprite);
        globe.customLayerData([...spriteMarkers]);

        globe.pointOfView({ lat: d.lat, lng: d.lng, altitude: 2 });

        console.log(`check-in Added: ${d.user} at (${d.lat}, ${d.lng})`);
      });
    });
  </script>

<script src="https://unpkg.com/globe.gl"></script>
<script src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const globeContainer = document.getElementById('globeViz');

      const pointMarkers = [];
      const spriteMarkers = [];

      const globe = Globe()(globeContainer)
        .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
        .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
        .backgroundColor('#000000')
        .pointLat(d => d.lat)
        .pointLng(d => d.lng)
        .pointColor(d => d.color || '#9146FF')
        .pointLabel(d => d.label || d.user || '')
        .pointAltitude(0.06)
        .pointRadius(0.2)
        .pointsMerge(false)
        .pointsData(pointMarkers)
     
      const params = new URLSearchParams(window.location.search);
      const client = new StreamerbotClient({
        host: params.get('host') || '127.0.0.1',
        port: params.get('port') || ''
      });

      client.on('General.Custom', (payload) => {
        if (payload.data?.event !== 'LocationPin') return;

        const d = payload.data;
        console.log('📍 Incoming check-in payload:', d);

        if (!d.lat || !d.lng || !d.user || !d.avatarUrl) {
          console.warn('❌ Missing required fields in payload.');
          return;
        }

        const point = {
          lat: d.lat,
          lng: d.lng,
          user: d.user,
          color: d.color || '#9146FF',
          label: d.user
        };
        pointMarkers.push(point);
        globe.pointsData([...pointMarkers]);

        const sprite = {
          lat: d.lat,
          lng: d.lng,
          avatarUrl: d.avatarUrl
        };
        spriteMarkers.push(sprite);
        globe.customLayerData([...spriteMarkers]);

        globe.pointOfView({ lat: d.lat, lng: d.lng, altitude: 2 });

        console.log(`check-in Added: ${d.user} at (${d.lat}, ${d.lng})`);
      });
    });
  </script>

KP-C

Kevin Powell - Community•9mo ago

TheJoshShephard

Globe.GL & Three.JS Object?

<script src="https://unpkg.com/globe.gl"></script>
<script src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const globeContainer = document.getElementById('globeViz');

      const pointMarkers = [];
      const spriteMarkers = [];

      const globe = Globe()(globeContainer)
        .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
        .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
        .backgroundColor('#000000')
        .pointLat(d => d.lat)
        .pointLng(d => d.lng)
        .pointColor(d => d.color || '#9146FF')
        .pointLabel(d => d.label || d.user || '')
        .pointAltitude(0.06)
        .pointRadius(0.2)
        .pointsMerge(false)
        .pointsData(pointMarkers)
     
      const params = new URLSearchParams(window.location.search);
      const client = new StreamerbotClient({
        host: params.get('host') || '127.0.0.1',
        port: params.get('port') || ''
      });

      client.on('General.Custom', (payload) => {
        if (payload.data?.event !== 'LocationPin') return;

        const d = payload.data;
        console.log('📍 Incoming check-in payload:', d);

        if (!d.lat || !d.lng || !d.user || !d.avatarUrl) {
          console.warn('❌ Missing required fields in payload.');
          return;
        }

        const point = {
          lat: d.lat,
          lng: d.lng,
          user: d.user,
          color: d.color || '#9146FF',
          label: d.user
        };
        pointMarkers.push(point);
        globe.pointsData([...pointMarkers]);

        const sprite = {
          lat: d.lat,
          lng: d.lng,
          avatarUrl: d.avatarUrl
        };
        spriteMarkers.push(sprite);
        globe.customLayerData([...spriteMarkers]);

        globe.pointOfView({ lat: d.lat, lng: d.lng, altitude: 2 });

        console.log(`check-in Added: ${d.user} at (${d.lat}, ${d.lng})`);
      });
    });
  </script>

<script src="https://unpkg.com/globe.gl"></script>
<script src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const globeContainer = document.getElementById('globeViz');

      const pointMarkers = [];
      const spriteMarkers = [];

      const globe = Globe()(globeContainer)
        .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
        .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
        .backgroundColor('#000000')
        .pointLat(d => d.lat)
        .pointLng(d => d.lng)
        .pointColor(d => d.color || '#9146FF')
        .pointLabel(d => d.label || d.user || '')
        .pointAltitude(0.06)
        .pointRadius(0.2)
        .pointsMerge(false)
        .pointsData(pointMarkers)
     
      const params = new URLSearchParams(window.location.search);
      const client = new StreamerbotClient({
        host: params.get('host') || '127.0.0.1',
        port: params.get('port') || ''
      });

      client.on('General.Custom', (payload) => {
        if (payload.data?.event !== 'LocationPin') return;

        const d = payload.data;
        console.log('📍 Incoming check-in payload:', d);

        if (!d.lat || !d.lng || !d.user || !d.avatarUrl) {
          console.warn('❌ Missing required fields in payload.');
          return;
        }

        const point = {
          lat: d.lat,
          lng: d.lng,
          user: d.user,
          color: d.color || '#9146FF',
          label: d.user
        };
        pointMarkers.push(point);
        globe.pointsData([...pointMarkers]);

        const sprite = {
          lat: d.lat,
          lng: d.lng,
          avatarUrl: d.avatarUrl
        };
        spriteMarkers.push(sprite);
        globe.customLayerData([...spriteMarkers]);

        globe.pointOfView({ lat: d.lat, lng: d.lng, altitude: 2 });

        console.log(`check-in Added: ${d.user} at (${d.lat}, ${d.lng})`);
      });
    });
  </script>

Globe.GL & Three.JS Object?

Globe.GL & Three.JS Object?

Similar Threads

Similar Threads

Similar Threads