Three.js - Imported obj material not showing

Question

I suppose my first question is - because most of the threads here I've found on the subject are 3-5 years old now - what is the best way to import 3dsmax models or scenes to use in three.js?

Currently I've made a quick coke can with a simple texture applied, however when I use the obj loader found under examples/js/loaders the texture does not load.

I've tried using the python script to convert obj files to js however given that there is an obj loader this seemed like an unnecessary additional step (I was not able to get the textures to work that way either). Am I correct in assuming the obj loader has made the python conversion script obsolete?

When I try to load the scene I get the following error in my console:

Not allowed to load local resource: file:///C:/wamp/www/gordon/skins/coke_uv_map.jpg

See the following code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
    </body>
        <script src="three.min.js"></script>
        <script src="controls/OrbitControls.js"></script>
        <script src="DDSLoader.js"></script>
        <script src="MTLLoader.js"></script>
        <script src="OBJMTLLoader.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

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

            var controls;
            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'mousedown', render );

            var hemiLight = new THREE.HemisphereLight( 0xa4cecb, 0xdae0e6, 1 ); 
            scene.add(hemiLight);  

            var dirLight = new THREE.DirectionalLight( 0xFFA200, 1);
            scene.add(dirLight);

            THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

            var loader = new THREE.OBJMTLLoader();
            loader.load( 'cokecan.obj', 'cokecan.mtl', function ( object ) {
                object.position.y = 0;
                object.position.x = 0;
                object.position.z = 0;
                scene.add( object );
            });

            camera.position.z = 50;
            camera.position.y = 25;
            camera.position.x = 0;

            function render() {
                requestAnimationFrame( render );
                renderer.render( scene, camera );
            }
            render();
        </script>
</html>

Here's a comparison of what I want versus what I'm getting (ignore the lighting):

Based on your error it looks like you are trying to a load a texture on your disk drive, browsers generally don't allow this. I would spin up a simple node.js or compatible server and serve the assets that way. Browsers don't allow access to loose files for security reasons. — Adam William Larson
The strange thing is that I get the same error when I put it up on my web server. The exact same error pointing to the local files. As for node.js, I actually have no experience with it and I wouldn't know where to start — tomc
Can you look through the material and obj files to see if any of them are using local file paths? You may just have to edit those, in theory they should all be relative and you point them to the right remote path. — Adam William Larson

tomc tomc · Accepted Answer · 2015-12-09T20:37:50

For anybody getting the same error - I resolved this by opening the .mtl file that came with the .obj in a text editor and changing the path to my image.

Three.js - Imported obj material not showing

1 Answers