vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
1.97k stars 293 forks source link

Globe doesn't show on Next JS production mode #119

Open Xathoms opened 1 year ago

Xathoms commented 1 year ago

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

  new THREE.TextureLoader().load('//unpkg.com/three-globe/example/img/earth-water.png', texture => {
  globeMaterial.specularMap = texture;
  globeMaterial.emissiveMap = texture
  globeMaterial.specular = new THREE.Color('gray');
  globeMaterial.shininess = 15;

});

}, []);

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;`

vasturiano commented 1 year ago

@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.