Problems with .obj mesh showing up when using three.js

Questions
1

I have two scripts that I want to use to view a .obj file with its texture using a .mtl file and a set of texture files in a web browser. I have managed to load the texture files and model successfully, but the mesh appears black. Can someone please help me with this issue?

view.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View 3D Model with Textures</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
    <script type="importmap">
        {
          "imports": {
            "three": "./node_modules/three/src/Three.js",
            "OrbitControls": "./node_modules/three/examples/jsm/controls/OrbitControls.js",
            "OBJLoader": "./node_modules/three/examples/jsm/loaders/OBJLoader.js",
            "MTLLoader": "./node_modules/three/examples/jsm/loaders/MTLLoader.js",
            "GLTFLoader": "./node_modules/three/examples/jsm/loaders/GLTFLoader.js"
          }
        }
    </script>
</head>
<body>
    <script src="script.js" type="module"></script>
</body>
</html>

script.js

import * as THREE from 'three';
import { MTLLoader } from 'MTLLoader';
import { OBJLoader } from 'OBJLoader';
import { OrbitControls } from 'OrbitControls';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x808080); // Set gray background color
document.body.appendChild(renderer.domElement);

// Load materials and mesh
const mtlLoader = new MTLLoader();
mtlLoader.load('House/v2/texturedMesh.mtl', function(materials) {
    materials.preload();
    const objLoader = new OBJLoader();
    objLoader.setMaterials(materials); // Set loaded materials directly to OBJLoader

    // Load OBJ file with materials
    objLoader.load('House/v2/texturedMesh.obj', function(object) {
        // Adjust scale and position of the loaded object if necessary
        object.scale.set(0.5, 0.5, 0.5); // Scale down if needed
        object.position.y = -1; // Adjust vertical position if needed
        scene.add(object);

        // Camera setup
        camera.position.set(0, 0, 5); // Position the camera
        camera.lookAt(scene.position); // Point camera at the center of the scene

        // Add lights to the scene
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white ambient light
        scene.add(ambientLight);

scene
scene1414×606 4.52 KB

2

@lan_crafter try loading all your files locally in my OBJ Viewer just to see how the model shows and then try manipulating existing lights to see what adjustments might be needed.

You can always check the viewers code in my repository.

3

Hello,

I’ve used your viewer and this is what I saw. It seems to be a issue with the model itself.

test2
test21288×588 4.54 KB

I’ve also tested with some three.js 3d models and they seem to work fine.

test3
test3548×753 79 KB

I imported my file a a .glb and it works great!

1 Like