Reputation: 35

How to add another image in a scene in Three.js

I have this code and I cannot seem to be able to add any other image/texture to it. i tried this simple code right after scene = new Three.Scene();

var sphere1 = createMesh(new THREE.CubeGeometry(15, 15, 15), "plaster.jpg");
sphere1.rotation.y = -0.5;
sphere1.position.x = 12;
scene.add(sphere1);

into this code of my project

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js canvas - geometry - earth</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

        <link href="styles/styles.css" rel="stylesheet" type="text/css"></link>


        <style>

        body {
            background:#3b404a;
            margin:0; padding:0;
        }
        </style>

    </head>
    <body>

        <div class="wrapperBG">

            <!-- top menu -->
                <div class="menu">

                </div> <!-- end .menu -->
            <!-- end top menu -->

            <div id="container"></div>
            <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - earth demo</div>

            <script src="../build/three.min.js"></script>
            <script src="js/libs/stats.min.js"></script>

            <script>

                var container, stats;
                var camera, scene, renderer;
                var group;
                var mouseX = 0, mouseY = 0;

                var windowHalfX = window.innerWidth  / 2;
                var windowHalfY = window.innerHeight / 2;

                init();
                animate();

                function init() {

                    container = document.getElementById( 'container' );

                    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
                    camera.position.z = 700;
                    camera.position.y = 170;

                    scene = new THREE.Scene();

                    group = new THREE.Object3D();
                    scene.add( group );

                    // earth
                    var image = 'WorldMap.svg';
                    var loader = new THREE.TextureLoader();
                    loader.load( image, function ( texture ) {

                        //var geometry = new THREE.SphereGeometry( 180, 60, 60 );
                        var geometry = new THREE.PlaneGeometry(1024, 560);

                        var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );

                        var mesh = new THREE.Mesh( geometry, material );
                        group.add( mesh );

                    } );


                    renderer = new THREE.WebGLRenderer({alpha : true});
                    //renderer.setClearColor( 0xffa200, 0.5 );
                    renderer.setSize( window.innerWidth, window.innerHeight );

                    container.appendChild( renderer.domElement );

                    document.addEventListener( 'mousemove', onDocumentMouseMove, false );

                    window.addEventListener( 'resize', onWindowResize, false );



                }

                function onWindowResize() {

                    windowHalfX = window.innerWidth / 2;
                    windowHalfY = window.innerHeight / 2;

                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();

                    renderer.setSize( window.innerWidth, window.innerHeight );

                }

                function onDocumentMouseMove( event ) {

                    mouseX = ( event.clientX - windowHalfX );
                    mouseY = ( event.clientY - windowHalfY );

                }

                //

                function animate() {

                    requestAnimationFrame( animate );

                    render();
                    stats.update();

                }



                function render() {

                    //camera.position.x += ( mouseX - camera.position.x ) * 0.05;
                    //camera.position.y += ( - mouseY  - camera.position.y ) * 0.05;


                    /* ============= FLAT MAP INTERCATIVITY COORDINATES ============ */
                    camera.position.x += ( mouseX - (camera.position.x*50) ) * 0.007;
                    camera.position.y += ( - mouseY  - (camera.position.y *10) ) * 0.007;
                    /*================================================================ */

                    camera.lookAt( scene.position );

                    //group.rotation.y -= 0.01;

                    renderer.render( scene, camera );

                }


            </script>

            <!-- ====== EDITING THE SVG MAP ===== 
            <object data="WorldMap.svg" type="image/svg+xml" id="map"></object>
            <script>

                // refers to entire map loaded as object
                //note: svg document must have same path as the accessor
                var world = document.getElementById("map");

                //load asynchronous svg
                world.addEventListener("load",function(){
                    var region = world.contentDocument; //get the inner DOM of WorldMap.svg
                    var mapRegion = region.getElementById("DZ"); //get Algeria
                    mapRegion.setAttribute('fill', '#000000');
                },false);


            </script>

             ================================ -->

        </div>  <!-- end .wrapperBG -->

    </body>
</html>

I have the world map loaded but now i cannot add anything else to the scene. how can i do that?

Upvotes: 0

Answers (1)

GuyGood

Reputation: 1377

Look at your code and your project code.

var sphere1 = createMesh(new THREE.CubeGeometry(15, 15, 15), "plaster.jpg");

This is not going to work as plaster-jpg is a texture, not a material. Create a material first like you did in your project with:

 var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );

where texture is your plaster.jpg which is loaded using the image loader, too. This should do the trick. Just stick to your projects initial code! :)

Upvotes: 1

How to add another image in a scene in Three.js

Answers (1)

Related Questions