Code to load simply obj to view 3D using CDN SOLVED

PaoloHolzl · July 29, 2024, 10:02am

I have try more examples but with same result.
obj is correct (opened with other viewer).
Html file is in the same directory of obj.
The result is a blank screen.

seanwasere · July 29, 2024, 10:45am

Default material of OBJ will use MeshPhongMaterial.
This will need lighting in your scene.
Do you have any lighting?

PaoloHolzl · July 29, 2024, 11:34am

In my website I have only the cube.obj and this webpage:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js OBJ Loader</title>
<style>
    body { margin: 0; }
    canvas { display: block; }
</style> </head> <body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/OBJLoader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/MTLLoader.js"></script>
<script>
    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);
    document.body.appendChild(renderer.domElement);
    const light = new THREE.PointLight(0xffffff, 1, 100);
    light.position.set(10, 10, 10);
    scene.add(light);
    const objLoader = new THREE.OBJLoader();
    objLoader.load(
        'cube.obj', 
        (object) => {
            scene.add(object);
            object.position.set(0, 0, 0);
            object.scale.set(1, 1, 1);
        },
        undefined,
        (error) => {
            console.error('Errore nel caricamento dell\'oggetto:', error);
        }
    );
    camera.position.z = 5;
    // Funzione di animazione
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
</script>

Lukasz_D_Mastalerz · July 29, 2024, 12:14pm

Try set
const light = new THREE.PointLight(0xffffff, 1000, 100);

You have intensity too low of light. You using r128, they changed lights units from r155.

If still problem appears, check path of model.
To debug your rest of code try use this
'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/obj/tree.obj

PaoloHolzl · July 29, 2024, 12:23pm

I have try I have changed

https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
…cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/OBJLoader.js
…cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/MTLLoader.js
to
https://cdnjs.cloudflare.com/ajax/libs/three.js/r155/three.min.js
…cdnjs.cloudflare.com/ajax/libs/three.js/r155/loaders/OBJLoader.js
…cdnjs.cloudflare.com/ajax/libs/three.js/r155/loaders/MTLLoader.js

The page remain empty only the color of the result page was black now is white.

Lukasz_D_Mastalerz · July 29, 2024, 12:31pm

Try this:

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);
    document.body.appendChild(renderer.domElement);
    const light = new THREE.PointLight(0xffffff, 1000, 100);
    light.position.set(10, 10, 10);
    scene.add(light);
    const objLoader = new OBJLoader();
    objLoader.load(
        'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/obj/tree.obj', 
        (object) => {
            scene.add(object);
            object.position.set(0, 0, 0);
            object.scale.set(1, 1, 1);
        },
        undefined,
        (error) => {
            console.error('Errore nel caricamento dell\'oggetto:', error);
        }
    );
    camera.position.z = 5;
    // Funzione di animazione
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });

And keep your code updated as much as you can, because is changing still

const loader = new OBJLoader();

PaoloHolzl · July 29, 2024, 1:29pm

Same result black screen

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js OBJ Loader</title>
<style>
    body { margin: 0; }
    canvas { display: block; }
</style> </head> <body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/OBJLoader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/MTLLoader.js"></script>
<script>

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const light = new THREE.PointLight(0xffffff, 1000, 100);
light.position.set(10, 10, 10);
scene.add(light);
const objLoader = new OBJLoader();
objLoader.load(
    'cube.obj',
    (object) => {
        scene.add(object);
        object.position.set(0, 0, 0);
        object.scale.set(1, 1, 1);
    },
    undefined,
    (error) => {
        console.error('Errore nel caricamento dell\'oggetto:', error);
    }
);
camera.position.z = 5;
// Funzione di animazione
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

</script>

PaoloHolzl · July 29, 2024, 1:44pm

Thih is the content of cube.obj

Simple Cube

Vertices

v 1.0 1.0 1.0
v 1.0 1.0 -1.0
v 1.0 -1.0 -1.0
v 1.0 -1.0 1.0
v -1.0 1.0 1.0
v -1.0 1.0 -1.0
v -1.0 -1.0 -1.0
v -1.0 -1.0 1.0

Faces

f 1 2 6 5
f 2 3 7 6
f 3 4 8 7
f 4 1 5 8
f 1 2 3 4
f 5 6 7 8

Lukasz_D_Mastalerz · July 29, 2024, 1:52pm

I highly recommend studying the installation. When we use bundlers, CDN etc.

https://threejs.org/docs/index.html#manual/en/introduction/Installation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js OBJ Loader</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.166.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.166.0/examples/jsm/"
    }
  }
</script>
<script type='module'>
  import * as THREE from 'three';
  import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

  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);
  document.body.appendChild(renderer.domElement);

  const light = new THREE.PointLight(0xffffff, 1000, 100);
  light.position.set(10, 10, 10);
  scene.add(light);

  const objLoader = new OBJLoader();
  objLoader.load(
      'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/obj/tree.obj',
      (object) => {
          scene.add(object);
          object.position.set(0, 0, 0);
          object.scale.set(1, 1, 1);
      },
      undefined,
      (error) => {
          console.error('Errore nel caricamento dell\'oggetto:', error);
      }
  );

  camera.position.z = 5;

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

  window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
  });
</script>
</body>
</html>

GitHubDragonFly · July 29, 2024, 2:15pm

@PaoloHolzl here is your code with different CDN imports and it is using my OBJ model example.

You should be able to open this in the browser as it is.

Then make any changes to it so you can use your OBJ model.

Test.html (1.9 KB)

GitHubDragonFly · July 29, 2024, 2:57pm

@PaoloHolzl here is your code with the latest three.js module imports and it is still using my OBJ model example as well as OrbitControls.

Whatever is imported within the module script does not use THREE. in front of it when an instance is being created, like this line:

    const objLoader = new OBJLoader();

Also, the PointLight intensity has to be increased in the latest revision.

You should be able to open this in the browser as it is.

Test.html (2.3 KB)

PaoloHolzl · July 29, 2024, 3:07pm

the problem was that was not present complete url of the.obj.
Thank you.

NOTT_Sermsak · February 2, 2025, 4:06pm

This guide made me all clear. So much thank you.

Topic		Replies	Views
How to load an obj.file into three.js Questions obj-loader	4	805	June 25, 2020
Loading 3d model fails Questions obj-loader	6	2390	October 16, 2018
Obj file rendering Issue in Chrome Questions textures , materials , loaders	4	475	October 16, 2023
OBJ Loader doesn't show my object Questions loaders , geometry	4	558	July 12, 2021
Unable to view obj file in threejs Questions obj-loader	3	1939	November 6, 2020

Code to load simply obj to view 3D using CDN SOLVED

Simple Cube

Vertices

Faces

Related topics