# Can see my rhino .obj file

**URL:** <https://discourse.threejs.org/t/can-see-my-rhino-obj-file/24979>\
**Category:** Questions\
**Tags:** obj-loader\
**Created:** [April 1, 2021, 11:57am UTC](https://discourse.threejs.org/t/can-see-my-rhino-obj-file/24979 "2021-04-01T11:57:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jchristian](https://avatars.discourse-cdn.com/v4/letter/j/45deac/32.png) [@jchristian](https://discourse.threejs.org/u/jchristian)\
**Post date:** [April 1, 2021, 11:57am UTC](https://discourse.threejs.org/t/can-see-my-rhino-obj-file/24979/1 "2021-04-01T11:57:12Z")

</div>

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](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>
```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 1, 2021, 9:47pm UTC](https://discourse.threejs.org/t/can-see-my-rhino-obj-file/24979/2 "2021-04-01T21:47:57Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/d/0df3b51c0f7b0f2c94ab41ecd92324f726e418a2.png)

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

```javascript
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:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![Lonely\_Wanderer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lonely_wanderer/32/15923_2.png) [@Lonely\_Wanderer](https://discourse.threejs.org/u/Lonely_Wanderer)\
**Post date:** [April 1, 2021, 10:14pm UTC](https://discourse.threejs.org/t/can-see-my-rhino-obj-file/24979/3 "2021-04-01T22:14:13Z")

</div>

> [@Mugen87](#):
>
> `object.multiplyScalar( 0.01 );`

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

---

<div class="post-metadata">

**Author:** ![jchristian](https://avatars.discourse-cdn.com/v4/letter/j/45deac/32.png) [@jchristian](https://discourse.threejs.org/u/jchristian)\
**Post date:** [April 1, 2021, 10:29pm UTC](https://discourse.threejs.org/t/can-see-my-rhino-obj-file/24979/4 "2021-04-01T22:29:55Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 2, 2021, 8:16am UTC](https://discourse.threejs.org/t/can-see-my-rhino-obj-file/24979/5 "2021-04-02T08:16:05Z")

</div>

> [@Lonely\_Wanderer](#):
>
> What’s the difference between this and object.scale.set()?

`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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 2, 2021, 8:17am UTC](https://discourse.threejs.org/t/can-see-my-rhino-obj-file/24979/6 "2021-04-02T08:17:15Z")

</div>

> [@jchristian](#):
>
> however for whatever reason object.scalarMultiply wasnt doing much

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

Anyway, using `set()` is equally good!
