Remove the background

[haharimoto]

I am having issue with removing the background of the globe. Having tried to set the backgroundImageUrl to null and set the backgroundColor to rgba(0,0,0,0), they did not work as they would only make the background transparent, and did not actually remove the background itself. I would greatly appreciate it if anyone could tell me how to remove the background.

import React from 'react'
import Globe from 'react-globe.gl'
import continents from '../../public/custom.geo.json'
import earthImg from '../../public/earth.jpeg'
import { useEffect, useRef } from 'react'

function About() {
  const globeEl = useRef()

  useEffect(() => {
    // Auto-rotate
    globeEl.current.controls().autoRotate = true;
    globeEl.current.controls().autoRotateSpeed = 1;
    globeEl.current.controls().enableZoom = false;
    globeEl.current.pointOfView({
      lat: 23.5,
      lng: 0,
      altitude: 2.5,
    })
  }, [])

  return (
    <div id='about'>
      <div className="hero">
        <div className="hero--text">
          <h1>From Concept to Creation</h1>
          <h4>Bridging the Gap Between Imagination and Reality</h4>
          <div className="hero--description">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br></br>Voluptates reprehenderit totam delectus neque error ex numquam, sint dolorum! Aperiam, ipsum?
          </div>
        </div>

        <div className="hero--globe">
          <Globe
            ref={globeEl}
            globeImageUrl={earthImg}
            // backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
            backgroundColor='rgba(0,0,0,0)'
            width={1150}
            height={1150}
            hexPolygonsData={continents.features}
            hexPolygonMargin={0.7}
            hexPolygonColor={() => 'rgba(255, 255, 255, 1)'}

          />

        </div>
      </div>
    </div>
  )
}

export default About

[vasturiano]

@haharimoto have you looked at this example? https://vasturiano.github.io/react-globe.gl/example/hollow-globe/

[haharimoto]

@vasturiano yes, and its background is still clickable. I would like to remove the background so that only the globe is clickable.

Also, this is a different issue from what is above but I have set my code to change hexPolygons' altitude depending on mousedown/up events as you can see (setAltitude to 0.1 just for simplicity now.), but the animation is not so smooth. How can I make it a smooth animation like this? https://stripe.com/blog/globe

import React from 'react'
import Globe from 'react-globe.gl'
import countries from '../../public/custom.geo.json'
import earthImg from '../../public/earth.jpeg'
import { useState, useEffect, useRef } from 'react'

function About() {
  const [altitude, setAltitude] = useState(0.02)
  const globeEl = useRef()

  useEffect(() => {
    // Auto-rotate
    // console.log(globeEl.current);
    // console.log(globeEl.current.controls());
    globeEl.current.controls().autoRotate = true;
    globeEl.current.controls().autoRotateSpeed = 0.7;
    globeEl.current.controls().enableZoom = false;
    globeEl.current.pointOfView({
      lat: 23.5,
      lng: 0,
      altitude: 1.5,
    })
  }, [])

  return (
    <div id='about'>
      <div className="hero">
        <div className="hero--text">
          <h1>From Concept to Creation</h1>
          <h4>Bridging the Gap Between Imagination and Reality</h4>
          <div className="hero--description">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br></br>Voluptates reprehenderit totam delectus neque error ex numquam, sint dolorum! Aperiam, ipsum?
          </div>
        </div>

        <div className="hero--globe" onMouseDown={() => {setAltitude(0.1)}} onMouseUp={() => {setAltitude(0.02)}}>
          <Globe
            ref={globeEl}
            globeImageUrl={earthImg}
            backgroundColor='rgba(0,0,0,0)'
            width={800}
            height={800}
            hexPolygonsData={countries.features}
            hexPolygonMargin={0.7}
            hexPolygonColor={() => 'rgba(255, 255, 255, 1)'}
            hexPolygonAltitude={altitude}

          />

        </div>
      </div>
    </div>
  )
}

export default About

[BangNguyen1992]

Hello @haharimoto, I have a few suggestions since I am also working on a similar project using this library 😅

1. If you only want the globe to be clickable, I think using Globe layer with prop onGlobeClick would be better
2. For your 2nd question, I think I have a quite similar problem that had been answered here https://github.com/vasturiano/react-globe.gl/issues/135#issuecomment-1669266370

I hope this would help