CODEWITHSUNDEEP
javascriptthree.js
tomc
tomc

Reputation: 427

Three.js - Imported obj material not showing

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):

Renders

Upvotes: 1

Views: 2012

Answers (1)

tomc
tomc

Reputation: 427

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.

Upvotes: 1

Related Questions