Reputation: 13

Three .js importing textures

I'm using three.js and have now a scene with a floor and a car as json loaded. Everything fine but the car is just black and not with the texture from blender. Is there any possibility to export it directly with textures from blender or add the textures afterwards ?

Here's the code I use :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>three.js - pointerlock controls</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            background-color: #eeeeee;
            margin: 0;
            overflow: hidden;
            font-family: arial;
        }

        #blocker {

            position: absolute;

            width: 100%;
            height: 100%;

            background-color: rgba(0,0,0,0.5);

        }

        #instructions {

            width: 100%;
            height: 100%;

            display: -webkit-box;
            display: -moz-box;
            display: box;

            -webkit-box-orient: horizontal;
            -moz-box-orient: horizontal;
            box-orient: horizontal;

            -webkit-box-pack: center;
            -moz-box-pack: center;
            box-pack: center;

            -webkit-box-align: center;
            -moz-box-align: center;
            box-align: center;

            color: #ffffff;
            text-align: center;

            cursor: pointer;

        }

    </style>
</head>
<body>
    <script src="../build/three.min.js"></script>
    <script src="js/controls/PointerLockControls.js"></script>

    <div id="blocker">

        <div id="instructions">
            <span style="font-size:40px">Click to move</span>
            <br />
            (WASD or Arrow Keys = Move, SPACE = Jump, MOUSE = Look around)
        </div>

    </div>

    <script>

        var camera, scene, renderer;
        var geometry, material, mesh;
        var loader;
        var mesh2;
        var loadModel;
        var controls,time = Date.now();

        var objects = [];

        var ray;

        var blocker = document.getElementById( 'blocker' );
        var instructions = document.getElementById( 'instructions' );

        // http://www.html5rocks.com/en/tutorials/pointerlock/intro/

        var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;

        if ( havePointerLock ) {

            var element = document.body;

            var pointerlockchange = function ( event ) {

                if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {

                    controls.enabled = true;

                    blocker.style.display = 'none';

                } else {

                    controls.enabled = false;

                    blocker.style.display  = '-webkit-box';
                    blocker.style.display = '-moz-box';
                    blocker.style.display = 'box';

                    instructions.style.display = '';

                }

            }

            var pointerlockerror = function ( event ) {

                instructions.style.display = '';

            }

            // Hook pointer lock state change events
            document.addEventListener( 'pointerlockchange', pointerlockchange, false );
            document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
            document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );

            document.addEventListener( 'pointerlockerror', pointerlockerror, false );
            document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
            document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );

            instructions.addEventListener( 'click', function ( event ) {

                instructions.style.display = 'none';

                // Ask the browser to lock the pointer
                element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;

                if ( /Firefox/i.test( navigator.userAgent ) ) {

                    var fullscreenchange = function ( event ) {

                        if ( document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element ) {

                            document.removeEventListener( 'fullscreenchange', fullscreenchange );
                            document.removeEventListener( 'mozfullscreenchange', fullscreenchange );

                            element.requestPointerLock();
                        }

                    }

                    document.addEventListener( 'fullscreenchange', fullscreenchange, false );
                    document.addEventListener( 'mozfullscreenchange', fullscreenchange, false );

                    element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;

                    element.requestFullscreen();

                } else {

                    element.requestPointerLock();

                }

            }, false );

        } else {

            instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';

        }

        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );


            scene = new THREE.Scene();
            scene.fog = new THREE.Fog( 0xffffff, 0, 750 );

            var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
            light.position.set( 1, 1, 1 );
            scene.add( light );

            var light = new THREE.DirectionalLight( 0xffffff, 0.75 );
            light.position.set( -1, - 0.5, -1 );
            scene.add( light );

            controls = new THREE.PointerLockControls( camera );
            scene.add( controls.getObject() );

            ray = new THREE.Raycaster();
            ray.ray.direction.set( 0, -1, 0 );

            // floor

            geometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
            geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

            for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {

                var vertex = geometry.vertices[ i ];
                vertex.x += Math.random() * 20 - 10;
                vertex.y += Math.random() * 2;
                vertex.z += Math.random() * 20 - 10;

            }

            for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {

                var face = geometry.faces[ i ];
                face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 3 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );

            }

            material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );

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

            // objects
    loader = new THREE.JSONLoader(  );
    loadModel = function(geometry) 
        {                        
            mesh2 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ) } ) );
            mesh2.scale.set(0.1, 0.1, 0.1);
            mesh2.position.set(0, 1, 0);
            mesh2.rotation.set(29.85, 3.14, 2);

            scene.add( mesh2 );
        };
    loader.load('blender.js/auto.js', loadModel );            


            //

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );

            document.body.appendChild( renderer.domElement );

            //

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

        }

        function onWindowResize() {

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

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

        }

        function animate() {

            requestAnimationFrame( animate );

            //

            controls.isOnObject( false );

            ray.ray.origin.copy( controls.getObject().position );
            ray.ray.origin.y -= 10;

            var intersections = ray.intersectObjects( objects );

            if ( intersections.length > 0 ) {

                var distance = intersections[ 0 ].distance;

                if ( distance > 0 && distance < 10 ) {

                    controls.isOnObject( true );

                }

            }

            controls.update( Date.now() - time );

            renderer.render( scene, camera );

            time = Date.now();

        }

    </script>
</body>
</html>

The part with //objects is where I load the car I already tried to add some example texture which doesn't work as well. The best would be when I can simply import the textures in blender together with the model.

Upvotes: 0

Answers (1)

uhura

Reputation: 2683

Tutorial how to export from blender: here

Load object with texture:

var loader = new THREE.JSONLoader();          

loader.load( "obj.js", function(geometry, materials) {
     var material = new THREE.MeshFaceMaterial(materials);
     mesh = new THREE.Mesh(geometry, materials);
     scene.add(mesh)
});

Add texture separately:

var loader = new THREE.JSONLoader();          

loader.load( "obj.js", function(geometry) {

     var texture = THREE.ImageUtils.loadTexture(textureUrl);
     var material = new THREE.MeshLambertMaterial({map: texture});
     mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh)
});

Upvotes: 3

Three .js importing textures

Answers (1)

Related Questions