I don't know why, the globe work perfectly on development mode, but when i try to reproduce that on production mode it doesn't appear.
`
import dynamic from 'next/dynamic';
import React, { forwardRef } from 'react';
import * as THREE from 'three';
import MapData from "./WorldMap3D.json";
@Xathoms are you using this module or react-globe.gl? If the other, it's better to report it on that repo instead. But I also recommend posting a reproducing example on codesandbox so you can get better help.
I don't know why, the globe work perfectly on development mode, but when i try to reproduce that on production mode it doesn't appear.
` import dynamic from 'next/dynamic'; import React, { forwardRef } from 'react'; import * as THREE from 'three'; import MapData from "./WorldMap3D.json";
const { useState, useEffect, useRef } = React;
const Globe = dynamic(() => import("./Globes"), { ssr: false, });
const PersonalCountry = ["Italy", "Spain", "France", "Sweden", "Germany", "United States of America", "Portugal", "Netherlands", "India", "Brazil", "Canada", "Australia", "New Zealand", "United Kingdom"]
// custom globe material const globeMaterial = new THREE.MeshPhongMaterial();
globeMaterial.bumpScale = 20; globeMaterial.emissive = new THREE.Color("#0096FF") globeMaterial.emissiveIntensity = 0.2; globeMaterial.roughness = 1 globeMaterial.metalness = 1.0
//console.log(globeMaterial)
const World = ({theme, isMobile}) => { const ref = useRef() const Globo = forwardRef((props, ref) => <Globe {...props} forwardRef={ref} />); //const [countries, setCountries] = useState({ features: [] });
function handleGlobe() { ref.current.controls().autoRotate = true; ref.current.controls().autoRotateSpeed = 2; //ref.current.pointOfView({ altitude: 4.5 });
} function ChangeSpeed(pol) { pol ? ref.current.controls().autoRotateSpeed = 0 : ref.current.controls().autoRotateSpeed = 2;
}
useEffect(() => { // load data
}, []);
return <Globo ref={ref} height={!isMobile ? "" : 412}
width={!isMobile ? 1024 : 412}
globeImageUrl="//unpkg.com/three-globe/example/img/earth-dark.jpg"
globeMaterial={globeMaterial}
bumpImageUrl="//unpkg.com/three-globe/example/img/earth-topology.png"
backgroundColor="rgba(0, 100, 0, 0)"
atmosphereColor={theme == "light" ? "#000011" : "lightskyblue"}
polygonsData={MapData.features.filter(d => PersonalCountry.includes(d.properties.NAME))}
polygonAltitude={0.2}
polygonsTransitionDuration={3000}
polygonCapColor={() => 'rgba(200, 0, 0, 0.6)'}
polygonSideColor={() => 'rgba(0, 100, 0, 0.15)'}
//polygonStrokeColor = "black"
polygonLabel={({ properties: d }) =>
<b>${d.ADMIN} (${d.ISO_A2})</b> <br /> Population: <i>${Math.round(+d.POP_EST / 1e4) / 1e2}M</i>
} onPolygonHover={(pol) => ChangeSpeed(pol)} onGlobeReady={handleGlobe} />; };export default World;`