How to load OBJ and MTL?

Questions
, ,
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/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import { OBJLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/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