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

Answer 1

对于遇到相同错误的任何人-我通过在文本编辑器中打开.obj附带的.mtl文件并更改我的图像的路径来解决此问题。

Three.js - Imported obj material not showing

Question

1 answers

solution1
1 2015-12-09 20:37:50

Three.js - Imported obj material not showing

Question

1 answers

solution1 1 2015-12-09 20:37:50

solution1
1 2015-12-09 20:37:50