Nextjs 14 - Clouds example - Does not work

[aaadamgo]

So, from going through nearly every thread here to figure out how to get it to render the globe and compile without errors, I did this with success.

I'm utilising the clouds example, to render the cloud image layer. Even using the exact same code, this is the console error;

I've tried everything I possibly can and the error persists.

Versions;
"three": "^0.149.0"
"react-globe.gl": "^2.28.0",

For full view of the code:

On a parent file i'm importing my 'world' component using the following;

// Dynamic Import
const World = dynamic(() => import("../World").then((mod) => mod.default), {
    ssr: false,
    loading: () => (
        <div>
            <span>Loading the world</span>
        </div>
    ),
});

Then on the World component...

"use client";

// Imports
// ------------
import React, { useRef, useEffect } from "react";
import Globe from "react-globe.gl";
import * as THREE from "three";

// Styles
// ------------
import { Jacket } from "./styles";

// Component
// ------------
const World = () => {
    // NOTE • Refs
    const globeEl = useRef();
    const jacketRef = useRef();

    // NOTE • States
    const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });

    // NOTE • Effects
    useEffect(() => {
        const globe = globeEl.current;

        // Auto-rotate
        globe.controls().autoRotate = true;
        globe.controls().autoRotateSpeed = 0.35;
        globe.pointOfView({ altitude: 1.66 });

        // Add clouds sphere
        const CLOUDS_IMG_URL =
            "//unpkg.com/three-globe/example/clouds/clouds.png";
        // const CLOUDS_IMG_URL = "/cloudstest.png";
        const CLOUDS_ALT = 0.004;
        const CLOUDS_ROTATION_SPEED = -0.006; // deg/frame

        new THREE.TextureLoader().load(CLOUDS_IMG_URL, (cloudsTexture) => {
            const clouds = new THREE.Mesh(
                new THREE.SphereGeometry(
                    globe.getGlobeRadius() * (1 + CLOUDS_ALT),
                    75,
                    75
                ),
                new THREE.MeshPhongMaterial({
                    map: cloudsTexture,
                    transparent: true,
                })
            );
            globe.scene().add(clouds);

            (function rotateClouds() {
                clouds.rotation.y += (CLOUDS_ROTATION_SPEED * Math.PI) / 180;
                requestAnimationFrame(rotateClouds);
            })();
        });
    }, []);

    // Update dimensions when container size changes
    useEffect(() => {
        const updateDimensions = () => {
            if (jacketRef.current) {
                setDimensions({
                    width: jacketRef.current.offsetWidth,
                    height: jacketRef.current.offsetHeight,
                });
            }
        };

        updateDimensions();
        window.addEventListener("resize", updateDimensions);

        return () => {
            window.removeEventListener("resize", updateDimensions);
        };
    }, []);

    return (
        <Jacket ref={jacketRef}>
            <Globe
                ref={globeEl}
                animateIn={false}
                backgroundColor="#00000000"
                width={dimensions.width}
                height={dimensions.height}
                globeImageUrl="//unpkg.com/three-globe/example/img/earth-blue-marble.jpg"
                bumpImageUrl="//unpkg.com/three-globe/example/img/earth-topology.png"
                showAtmosphere={false}
            />
        </Jacket>
    );
};

// Exports
// ------------
export default World;

[vasturiano]

@aaadamgo thanks for reaching out.

Would you be able to replicate this example on https://codesandbox.io? This would give us a base for troubleshooting the issue further.

[aaadamgo]

Hey @vasturiano thanks!

Ok so I've set it up on codesandbox, and if I use the following, it works perfectly fine.

"dependencies": {
    "@types/three": "0.170.0",
    "next": "15.0.3",
    "react": "^18",
    "react-dom": "^18",
    "react-globe.gl": "2.28.1",
    "three": "0.171.0"
  },

Preview here: https://codesandbox.io/p/devbox/globe-test-n3xcpr

Now, in my actual project, I'm using Spline for another component. In order for me to get Spline working properly, I need to use the following versions as it simply doesn't work on the latest yet;

"dependencies": {
  "@splinetool/loader": "^1.9.48",
  "next": "^14.2.20",
  "react": "^18",
  "react-dom": "^18",
  "react-globe.gl": "2.28.1",
  "three": "0.149.0"
},

Preview here: https://codesandbox.io/p/devbox/globe-test-v2-l4m42v

[vasturiano]

@aaadamgo most likely that's because of the three dependency:

"three": "0.149.0"

v149 is bit too old. For the globe to behave properly the minimum version of three included should be v154. Have you tried with a more recent version of three to see if the issue is fixed?

[aaadamgo]

@vasturiano yeah I understand that. Unfortunately spline doesn't work properly on the newer versions. I've tried every version above 149 to try both spline + globe together and there's always one or the other that doesn't work.

Is there no other way to do this? The only issue is rendering the clouds.