How to load OBJ and MTL?

Questions
, ,
1

What I’ve already done:

I’ve been reading some docs and examples from threejs.org, here we import files
directly with URLs, and I need to use them like any other dependency.

So I installed three (as always) and three-obj-loader and followed the instructions…

But clearly I’m doing something wrong. :sweat_smile:

What I need:

I’d appreciate some steps/guide to use OBJLoader and MTLLoader as dependencies
(if it’s possible).

2

three-obj-loader should actually be deprecated since you can import OBJLoader and MTLLoader from the original npm package like so:

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';

This is explained in the following guide (section Importable Examples): https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules

So there is absolutely no need for such external npm packages like three-obj-loader anymore. All example code is available as ES6 modules in the original three package.

1 Like
3

Look there

2018:

http://discourse.threejs.hofk.de/2018/index2018.html

in the middle of the page
http://discourse.threejs.hofk.de/2018/loadOBJ/loadOBJ.html

4

I just realized that all those examples are directly included in the package of three. So, separately npm package are absolutely unnecessary, as you well said.

It was my ignorance and a deprecated package together. :sweat_smile:

Thanks for the help, and have a grate day. :+1:

5

Thank you too. :+1:

6

These packages have unfortunately caught out a lot of people. I’ve reached out to the authors of several packages by opening issues on their github repos, but only one dev has responded so far :slightly_frowning_face:

7

Same for three-full. It has still over 2000 downloads per week! Unfortunately, the author does not react on my comment as well…

1 Like
8

I asked a bit more pointedly, hopefully that will get his attention.

1 Like
9

There are always questions about loading models. Especially in connection with ES6 modules. So recently there: Discord

Therefore I have recreated the old example from the Collection of examples from discourse.threejs.org ( loadOBJ ) with modules. There are variants of the integration of the modules in the source code that you can try out.

See 2021 discourse.threejs.hofk.de LoadOBJbyModule

<script type="module">

// ----- import from the web -----

// current revision from the repository
/*
import * as THREE from 'https://threejs.org/build/three.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import { OBJLoader } from 'https://threejs.org/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'https://threejs.org/examples/jsm/loaders/MTLLoader.js';
*/

// or a specific revision from a CDN ( Content Delivery Network, e.g.  https://www.jsdelivr.com/package/npm/three )

/*
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/controls/OrbitControls.js';
import { OBJLoader } from 'https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/loaders/MTLLoader.js';
*/ 

//  ----- import local -----

// NOTE! changed identifiers (.rev) and changed import statements at the beginning of the files
// https://hofk.de/main/discourse.threejs/Local%20use%20of%20the%20examples.pdf
// see https://hofk.de/main/discourse.threejs/Module%20usage.pdf

import * as THREE from '../jsm/three.module.124.js'; // 
import { OrbitControls } from '../jsm/OrbitControls.124.js'; 
import { OBJLoader } from '../jsm/OBJLoader.124.js';
import { MTLLoader } from '../jsm/MTLLoader.124.js';
1 Like