Unable to display Three.JS OBJ Model

Question

Unable to display Three.JS OBJ Model

I am facing an issue with loading a .obj model in Three.js. I created the model in Cinema 4D, exported it with a scale of 1 meter, and tried to load it using OBJLoader in Three.js. However, even though there are no errors, the model is not showing up. What could be causing this problem?

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<body style="margin:0;padding:0;">
</body>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 2000);
    var render = new THREE.WebGLRenderer();
    camera.position.set(0, 0, 53);

    render.setSize(innerWidth, innerHeight);
    document.body.appendChild(canvas = render.domElement);

    render.setClearColor(0x111111, 1);

    function loadScene() {
        var loader = new THREE.OBJLoader();
        loader.load("./fox.obj", function(model) {
            model.traverse(function(child) {
                if (child instanceof THREE.Mesh) {
                    child.material.color = 0xffb830;
                }
            });
            model.position.set(0, 0, -53);
            scene.add(model);
            window.model = model;
        });
        render.render(scene, camera);
    }

    window.onload = loadScene;
</script>

javascript three.js

Answer 1

Answer №1

I managed to get it working by implementing the following steps:

1 - I removed the line below:

render.render(scene, camera);

2 - Then, I added this code snippet after setting up the initializations:

function animate() {
    requestAnimationFrame( animate );
    render.render( scene, camera );
}
animate();

3 - Furthermore, I utilized a different source for the three.js library. I incorporated the local copy that is currently functioning in another project, and it resolved the issue. It's possible that you are retrieving it from an outdated source... Consider obtaining the file directly from the download link: https://github.com/mrdoob/three.js/archive/master.zip

It is also advisable to integrate OrbitControls into the scene so that you can navigate around the object, especially if it may be larger than expected and not visible as a result.

var controls = new THREE.OrbitControls( camera, render.domElement );

UPDATE:

To address the issue, simply call the render function within the loader's method, as suggested by ManoDestra:

loader.load("./fox.obj", function(model) {
    model.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.material.color = 0xffb830;
        }
    });
    model.position.set(0, 0, -53);
    scene.add(model);
    window.model = model;
    render.render(scene, camera);
});

Answer 2

I managed to get it working by implementing the following steps:

1 - I removed the line below:

render.render(scene, camera);

2 - Then, I added this code snippet after setting up the initializations:

function animate() {
    requestAnimationFrame( animate );
    render.render( scene, camera );
}
animate();

3 - Furthermore, I utilized a different source for the three.js library. I incorporated the local copy that is currently functioning in another project, and it resolved the issue. It's possible that you are retrieving it from an outdated source... Consider obtaining the file directly from the download link: https://github.com/mrdoob/three.js/archive/master.zip

It is also advisable to integrate OrbitControls into the scene so that you can navigate around the object, especially if it may be larger than expected and not visible as a result.

var controls = new THREE.OrbitControls( camera, render.domElement );

UPDATE:

To address the issue, simply call the render function within the loader's method, as suggested by ManoDestra:

loader.load("./fox.obj", function(model) {
    model.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.material.color = 0xffb830;
        }
    });
    model.position.set(0, 0, -53);
    scene.add(model);
    window.model = model;
    render.render(scene, camera);
});

Answer 3

Answer №2

If you're encountering an issue, it might be because you are trying to render the scene before the object is fully loaded.

To fix this, make sure you place your render.render(scene, camera) call after your model has finished loading. Here's an example:

function loadScene() {
    var loader = new THREE.OBJLoader();
    loader.load("./fox.obj", function(model) {
        model.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.color = 0xffb830;
            }
        });
        model.position.set(0, 0, -53);
        scene.add(model);
        window.model = model;
        render.render(scene, camera);
    });
}

It's also important to ensure that all of your source code is in the head section or at the end of your HTML. Then, trigger your initialization code on the window's load event. Remember, only render the scene once everything is fully loaded.

You may need to adjust the camera position to look at your scene, like so...

camera.lookAt(scene.position);

Lastly, keep in mind that child.material.color is an object e.g.

child.material.color = { r:1, g:1, b:1 }

.

Answer 4

If you're encountering an issue, it might be because you are trying to render the scene before the object is fully loaded.

To fix this, make sure you place your render.render(scene, camera) call after your model has finished loading. Here's an example:

function loadScene() {
    var loader = new THREE.OBJLoader();
    loader.load("./fox.obj", function(model) {
        model.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.color = 0xffb830;
            }
        });
        model.position.set(0, 0, -53);
        scene.add(model);
        window.model = model;
        render.render(scene, camera);
    });
}

It's also important to ensure that all of your source code is in the head section or at the end of your HTML. Then, trigger your initialization code on the window's load event. Remember, only render the scene once everything is fully loaded.

You may need to adjust the camera position to look at your scene, like so...

camera.lookAt(scene.position);

Lastly, keep in mind that child.material.color is an object e.g.

child.material.color = { r:1, g:1, b:1 }

.

Answer 5

Answer №3

Make sure to use
```
THREE.MeshBasicMaterial({color:'red'})
```
on all your loaded meshes, ensuring that issues like missing normals, lights, and textures are eliminated effortlessly (This material does not depend on any of those factors to function).
Check the values in
```
model.children[N].geometry.vertices
```
to ensure they are valid

Answer 6

Make sure to use
```
THREE.MeshBasicMaterial({color:'red'})
```
on all your loaded meshes, ensuring that issues like missing normals, lights, and textures are eliminated effortlessly (This material does not depend on any of those factors to function).
Check the values in
```
model.children[N].geometry.vertices
```
to ensure they are valid

Unable to display Three.JS OBJ Model

Answer №1

Answer №2

Answer №3

Similar questions

Convert angular-tree-component JSON into a suitable format and dynamically generate checkboxes or radio buttons

Deleting object property within Angular ng-repeat loop

Tips for creating a typescript typeguard function for function types

Unraveling the Distinctions: Identifying an Admin vs. a User within the API

Challenge with Context Api state not reflecting the latest changes

The hyperlink element has been added but is not clickable

Tips for preventing real-time changes to list items using the onchange method

Executing several GET requests in JavaScript

Guide to arranging components in two columns using VueJS Vuetify Grid

Monitor the elements displayed as you scroll

Are you familiar with the Puppeteer PDF tool that generates empty pages from the cloud and seamlessly integrates with Postman? What do

Showing Variables in JavaScript

Stop dishonesty in a timed internet assessment

How can I incorporate the GroundProjectedSkybox object from three.js into an AFrame project?

broker handling numerous ajax requests simultaneously

Implementing html5mode in Express.js and Angular.js for cleaner URLs

Is there a way to apply a smooth fade-in effect to an object using Three.js animations?

The Autocomplete feature from the @react-google-maps/api component seems to be malfunctioning as it returns

Performance problem with React-Native for-looping through a large array size

Grid Column with Checkboxes in Kendo UI for Vue