CODEWITHSUNDEEP
javascriptthree.js
Cambria
Cambria

Reputation: 153

How to create a Sphere with World Map using three.js?

I was making a sphere with world map using three.js but the output is just a black screen as shown.

BlackScreen

The code I used is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
        <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            camera.position.set( 0, 0, 50 );
            camera.lookAt( 0, 0, 0 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            const geometry = new THREE.SphereGeometry( 15, 32, 16 );
            const texture = new THREE.TextureLoader().load( 'C:\Users\pc\Desktop\Lines\land_ocean_ice_cloud_2048.jpg' );
            const material = new THREE.MeshBasicMaterial( { map: texture } );           
            const sphere = new THREE.Mesh( geometry, material );
            scene.add( sphere );



            function animate() 
            {
                requestAnimationFrame( animate );

                sphere.rotation.x += 0.01;
                sphere.rotation.y += 0.01;

                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

I couldn't explain why the code was unable to render the sphere. What went wrong?

Upvotes: 0

Views: 1129

Answers (1)

Cambria
Cambria

Reputation: 153

This is the correct code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
        <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            camera.position.set( 0, 0, 50 );
            camera.lookAt( 0, 0, 0 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            const geometry = new THREE.SphereGeometry( 15, 32, 16 );
            const texture = new THREE.TextureLoader().load( 'https://i.imgur.com/kFoWvzw.jpg' );
            const material = new THREE.MeshBasicMaterial( { map: texture } );           
            const sphere = new THREE.Mesh( geometry, material );
            scene.add( sphere );



            function animate() 
            {
                requestAnimationFrame( animate );

                sphere.rotation.x += 0.01;
                sphere.rotation.y += 0.01;

                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

I never thought that downloading the source and image from Internet and render it on web browser is impossible. The source and the image that should be rendered on web browser must be coming from the Internet itself and link it to the code via <source> and <texture> command using Internet URL.

What is more amazing is that once that the source and the image coming from the Internet via Internet URL has been rendered on web browser, it works even without any Internet!

Upvotes: 1

Related Questions