Simply assign a Material to loaded .OBJ - ThreeJS

Question

I've been hitting myself overhead with this one for the good three hours now.. My question is, would someone be kind enough to reorganize my example in such a way, that the object that I load comes with a color, any color

                var loader = new THREE.OBJLoader()
                loader.load( 'learning/exported1.obj', function ( object ) 
                {
                    object.traverse( function (child)
                    {
                        if ( child instanceof THREE.Mesh )
                        {
                            child.material.color.setHex( 0xffffff );
                        }
                    }
                    var OBJBoundingBox = new THREE.Box3().setFromObject(object);
                    OBJBoundingBox.center(object.position);
                    object.position.multiplyScalar(-1);
                    object.position.x = object.position.x;
                    object.position.y = object.position.y;
                    object.position.z = object.position.z;
                    scene.add( object );

                }, onProgress, onError );

If I throw the traverse part away the object is loaded successfully but is a simple white color, with it, the object does not appear on my screen...

        <script src="../build/three.js"></script>

    <script src="js/loaders/OBJLoader.js"></script>

    <script src="js/controls/OrbitControls.js"></script>

    <script src="js/shaders/CopyShader.js"></script>
    <script src="js/shaders/SMAAShader.js"></script>

    <script src="js/postprocessing/EffectComposer.js"></script>
    <script src="js/postprocessing/SMAAPass.js"></script>
    <script src="js/postprocessing/RenderPass.js"></script>
    <script src="js/postprocessing/MaskPass.js"></script>
    <script src="js/postprocessing/ShaderPass.js"></script>

    <script src="js/libs/dat.gui.min.js"></script>

These are my imports in case you think the problem lies in here

Thanks so much in advance, this is a project which I'm developing independently and would love it if I can get it working!

Are you performing all those postprocessing effects yet? Maybe they're washing out your colors. Have you tried adding a simple THREE.BoxGeometry() to your scene to see if that shows up? Could be your camera facing the wrong way. Maybe you're moving the object out of view with `.multiplyScalar(-1);`... could be hundreds of things. What are you seeing? — M -, Aug 30 '18 at 18:33
Hi, yep, I use those imports to AntiAlias my object. Granted, I probably don't need all of them... The issue is that when I remove the object.traverse part of the code - So that the remainder of the code starts with var OBJBoundingBox - I have the Object nicely in place in the middle of my screen but is a glossy white color. There is something wrong with the way the color is applied, as with the traverse function I load the background, but not the object... I am honestly giving up here, I wonder why it is so hard to assign a material simply... object.material.color.set anyone? :P — Lovro Mirnik, Aug 30 '18 at 18:46

score 3 · Accepted Answer · answered Aug 31 '18 at 06:54

I feel like an idiot but the thing I was missing was

);

at the end of object.traverse function

var loader = new THREE.OBJLoader()
            loader.load( 'learning/exported1.obj', function ( object ) 
            {
                object.traverse( function (child)
                {
                    if ( child instanceof THREE.Mesh )
                    {
                        child.material.color.setHex( 0xffffff );
                    }
                });
                // ^This over here^
                var OBJBoundingBox = new THREE.Box3().setFromObject(object);
                OBJBoundingBox.center(object.position);
                object.position.multiplyScalar(-1);
                object.position.x = object.position.x;
                object.position.y = object.position.y;
                object.position.z = object.position.z;
                scene.add( object );

            }, onProgress, onError );

Assigning a material now works perfectly with this code.

Simply assign a Material to loaded .OBJ - ThreeJS

1 Answers1