How do you import 3d models into three js without a GLTFLoader?

Questions
1

I’m asking this because I personally think that this is inconvenient to install an additional loader. Thanks!

2

I mean I know that I can also seem to import 2d images using base64 code.

3

All threejs support for external file formats is handled by loaders. There are many loaders to choose from (list), but if you want to import a 3D model that was not made in threejs you will need to use one of these — or write your own, which is unlikely to be more convenient than installing one.

2 Likes
4

gltf loader is now shipped with threejs, so no need for extra installation step (Maybe there is, but I’m not aware of that).

1 Like
5

The loader was always part of the repository and npm package.However, all JS files are available as modules now which makes it much easier to use files from the examples directory for projects.

1 Like
6

Interesting ! I didn’t catch this subtility ^^

1 Like
7

Exact usage depends on how you’re building your application.

ES6 Modules: (e.g. Webpack, Rollup)

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

UMD / CommonJS: (e.g. Browserify)

const THREE = window.THREE = require( 'three' );
require( 'three/examples/js/loaders/GLTFLoader.js' );

Plain scripts:

<script src="https://unpkg.com/three@0.112.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.112.0/examples/js/loaders/GLTFLoader.js"></script>

Most modern and production-level tools are moving toward the first option, but all three are acceptable.

4 Likes
8

THX!!! These lines of code were EXACTLY what I needed