Looking for a simple tutorial to load a 3D charactor not the one I've already had problems with

Questions
, ,
1

I’ve been trying to follow the hello world stuff and then I got to the tutorial about loading up a 3D model and that’s where everything went wrong.

This is the tutorial
https://threejs.org/docs/#manual/en/introduction/Loading-3D-models

And it contains one line in it which is strange.
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;

But then I had loads of problems and found out that GLTFLoader has been deprecated from this website three-gltf-loader - npm

Which says “Starting with three.js r103, GLTFLoader is included in the three package itself and installing three-gltf-loader is no longer necessary. It can be imported from ‘three/examples/jsm/loaders/GLTFLoader’”

However the error I was getting in this tutorial was “Uncaught TypeError: quat.clone().inverse is not a function” which is something to do with the OrbitControls.js library.

I found out that all the library’s should have the same version number, which was another issue. I didn’t know I had.

I’m having loads of different problems just trying to get a simple tutorial to work which can load up a 3D charactor.

Does anyone know of another tutorial to load up a 3D charactor which doesn’t have any problems?

Or does anyone know how to make sense of all the mess I found myself in with this tutorial?

2

Consider getting a bit familiar with javascript before diving into three.js - the library introduces it’s own challenges and difficulties, so combining learning javascript and three at the same time can indeed feel overwhelming.

In this guide modules are used (so familiarity with npm and bundlers would be quite helpful) - but you can also load GLTFLoader using a CDN (example) or <script> tags combined with the global THREE namespace (example.)

In terms of tutorials - if that’s a possibility for you - give Threejs Journey a try. It’s not free, but within a week it will teach almost absolutely everything you need to go from not-knowing-three to just-finished-coding-my-first-MMORPG (it covers everything from the very basics of web development to advanced shaders.)

3

Maybe what I wrote about this line …

import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;

…has been misinterpreted, is not a reference to my JavaScript ability, but a reference to calling a library that has been deprecated.

I do know other computer languages far better than JavaScript, but I do know the basics of JavaScript to be fine programming with it.

4

Ah, that line is not importing a deprecated library though - it’s fetching from official three - more specifically from examples/jsm/loaders subdirectory in three.

(examples/ subdirectory contains things all the magical things like loaders / utils / controls / effects that aren’t really part of core 3D rendering functionality.)

The deprecated library you’ve mentioned above would be imported I believe with something like:

import GLTFLoader from 'three-gltf-loader';
5

I always learn best from examples. From simple ones starting to more complicated ones.
Have a look at the collection.

see