Can see my rhino .obj file

hi - newbie user to threejs.

trying to load my rhino obj file but can’t see anything in the scene. It’s a very complex file…

code below…

obj file is here:

https://storage.googleapis.com/splash-modular-development.appspot.com/OBJ/d0d3bf18-2447-4c75-a315-a6bd555e1d16.obj?GoogleAccessId=firebase-adminsdk-nzwzo%40splash-modular-development.iam.gserviceaccount.com&Expires=1742169600&Signature=qqfXZuR%2Bc8hTDdylTYFfGnfVQnoax1%2B9GFVolNL72BbZtVyXpAw53t8IWodGK%2FbsxK30XAI3Mo7YbRvvthFrdY9xj7zmvBnot4fVih0YX5k5tpRF%2B8FNeFcCX5h%2FZs1iXrNr3YiEBEQ32AWBLcG5dOrtGaJsO%2BGBHeqPLJi8PBpewHvyI1esHo2SkXt%2B1qZA59IWQO1PNwbT31bTNH%2BscAx8QqCAYfQdhYjZ1h6ds0RySwr96W8LUHY%2BfaQSUUa%2BUmB5iWVokeE8aLY0WD%2B%2F79oX4%2F0fhq2Z4jVKbM9I0RemSwUqOijcOtVCmHPNuRA1Nkw8suD9qngE4f9aU%2FueJw%3D%3D

… html code is here

<body>
<div id="info">
    <a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader test
</div>

<script src="../build/three.min.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/controls/TrackballControls.js"></script>

<script>

    var container;
    var camera, scene, renderer, controls;
    var mouseX = 0, mouseY = 0;

    init();
    animate();

    function init()
    {
        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.z = 1000;

        // scene

        scene = new THREE.Scene();

        // lights

        var ambient = new THREE.AmbientLight( 0x101030 );
        scene.add( ambient );

        var directionalLight = new THREE.DirectionalLight( 0xffeedd );
        directionalLight.position.set( 0, 0, 1 );
        scene.add( directionalLight );

        // texture

        var manager = new THREE.LoadingManager();
        manager.onProgress = function ( item, loaded, total ) { };

        var texture = new THREE.Texture();

        var loader = new THREE.ImageLoader( manager );
        loader.load( 'textures/uv_grid_opengl.jpg', function ( image )
        {
            texture.image = image;
            texture.needsUpdate = true;
        } );

        // model

        var loader = new THREE.OBJLoader( manager );
        loader.load( 'models/obj/d0d3bf18-2447-4c75-a315-a6bd555e1d16.obj', function ( object )
        {
            object.traverse( function ( child )
            {
                if ( child instanceof THREE.Mesh )
                {
                    child.material.map = texture;
                    child.material.side = THREE.DoubleSide;
                }
            } );

            scene.add( object );
        } );

        //

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        // controls
        controls = new THREE.TrackballControls (camera, renderer.domElement);
        controls.rotateSpeed = 1.0;
        controls.zoomSpeed = 1.2;

        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.update();
        renderer.render( scene, camera );
    }

</script>

</body>

OBJLoader can load the model just fine. Here is a screenshot from the three.js editor:

Notice that it was necessary to scale down the model. You can do this in your code via:

object.multiplyScalar( 0.01 );

You can then position your camera at (60,30,90) at let it look at the origin.

I’ve also centered the model since it seems to have an offset. You can do this like so:

const aabb = new THREE.Box3().setFromObject( object );
const center = aabb.getCenter( new THREE.Vector3() );

object.position.x =+ ( object.position.x - center.x );
object.position.y =+ ( object.position.y - center.y );
object.position.z =+ ( object.position.z - center.z );

Also add an ambient and directional light to your scene.

What’s the difference between this and object.scale.set()?

Thanks All. Mugen that helped great… however for whatever reason object.scalarMultiply wasnt doing much… but object.scale.set(x,y,z) did the trick!

Cheers!

set() sets the given values whereas multiplyScalar() multiplies the given scalar with all three vector components. When scale is (1,1,1), it has the same effect.

1 Like

The method name is multiplyScalar(). Not scalarMultiply().

Anyway, using set() is equally good!