What am I doing wrong?

[exactalogistics]

Hello,

Trying to show your awesome globe in a Wordpress website. So far I've read some documentation and added the globe through the globeViz div, works like a charm. I've also added a sort of skin to the globe that will work for my project.

Now I'm trying to accomplish two things: disable zoom and initialize auto-rotate.

This is my code in total, nothing of the two things mentioned above happens. What am I missing?

Never worked with Globe.gl before but I really like it - I'm eager to learn more but at this stage a code fix is much appreciated.

        <script src="//unpkg.com/three"></script>
        <script src="//unpkg.com/topojson-client"></script>

        <script src="//unpkg.com/globe.gl"></script>
        <script>
            const world = Globe()
            (document.getElementById('globeViz'))
            .backgroundColor('rgba(0,0,0,0)')
            .showGlobe(false)
            .showAtmosphere(false);

            fetch('//unpkg.com/world-atlas/land-110m.json').then(res => res.json())
            .then(landTopo => {
                world
                .polygonsData(topojson.feature(landTopo, landTopo.objects.land).features)
                .polygonCapMaterial(new THREE.MeshLambertMaterial({ color: 'darkslategrey', side: THREE.DoubleSide }))
                .polygonSideColor(() => 'rgba(0,0,0,0)');
            });
            useEffect(() => {
                globeEl.current.controls().enableZoom = false;
                globeEl.current.controls().autoRotate = true;
                globeEl.current.controls().autoRotateSpeed = 0.7;
            }, []);
        </script>

[vasturiano]

@exactalogistics thanks for reaching out.

It looks like you're using the non React version of globe.gl here, but you're combining it with React code (useEffect, useRef, etc). You should stay with one form or the other, combining is not going to work.

But in any case, you're on to the right track, manipulating those attributes of the ThreeJS orbit controls is how you achieve those two features.

[exactalogistics]

Hello and thank you for clearifying!

I can't seem to see any examples of how to use it without React. You don't by any chance happen to have a link or similar to follow instructions on?

[vasturiano]

@exactalogistics there are many examples on https://github.com/vasturiano/globe.gl. None of these examples use React.

[exactalogistics]

Thanks for geting back to me. That's actually where I got the code from that I'm working on. Here: https://github.com/vasturiano/globe.gl/blob/master/example/hollow-globe/index.html

[exactalogistics]

How could I manipulate the React strings I've added in the code to plain JS? Maybe should ask on Stack Overflow? :)

[vasturiano]

You mean to access the controls? There's an example that does that here: https://globe.gl/example/world-population/

https://github.com/vasturiano/globe.gl/blob/f805a3da6ab04ace4bb7ec432a0841b49eae52e0/example/world-population/index.html#L35-L37