MD2CharacterComplex sample not working locally

I am trying to make this MD2CharacterComplex work locally on my computer using Vs Code’s “Open with live server” option.

To make things simple, I included all assets in the same directory as my index.html.

File structure:
-index.html
-Gyroscope.js
-MD2CharacterComplex.js
-OrbitControls.js
-stats.module.js
-three.module.js

my index.html is just the copy pasted version of the threejs link given above, the only thing I changed was the path to the imports.

When I open my live server using VS Code, all that displays is a white screen. What could be my error? Am I missing a specific file?

index.html (7.4 KB)

You can’t move ES6 modules to arbitrary directories since such files normally have dependencies to other files. There are two recommended options:

  • Import your files from a single CDN like jsdelivr:

https://cdn.jsdelivr.net/npm/three@0.118.3/build/three.module.js
https://cdn.jsdelivr.net/npm/three@0.118.3/examples/jsm/misc/Gyroscope.js
https://cdn.jsdelivr.net/npm/three@0.118.3/examples/jsm/misc/MD2CharacterComplex.js
https://cdn.jsdelivr.net/npm/three@0.118.3/examples/jsm/controls/OrbitControls.js
https://cdn.jsdelivr.net/npm/three@0.118.3/examples/jsm/libs/stats.module.js

  • Refactor the example and import your dependencies from the three npm package. However, this requires a small build setup like this one to make things work.
1 Like

I forked the sample build setup you suggested and worked from there.

I edited the main.js and index.html file as follows. Being a beginner to ES6 and Threejs, I’m having trouble on how I should restructure the code to make it work.
main.js (6.7 KB)
index.html (464 Bytes)

In your sample setup, I installed npm, then ran npm run build to update it and npm start to run it.

The new error that appears on my browser console that I’m not trying to solve are as follows:

Uncaught ReferenceError: onWindowResize is not defined
    at t.App.init (bundle.js:1)
    at (index):19

Failed to load resource: the server responded with a status of 404 (Not Found) : grasslight-big.jpg:1

I put my “three” folder in the same directory as main.js, and updated the paths as follows. I’m not sure if this is the correct implementation when you told me to import the dependencies from the three package.

import * as THREE from './three/build/three.module.js';

import Stats from 'three/examples/jsm/libs/stats.module.js';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { MD2CharacterComplex } from 'three/examples/jsm/misc/MD2CharacterComplex.js';
import { Gyroscope } from 'three/examples/jsm/misc/Gyroscope.js';

Thank you for your patience.

Please never do this. If you are new to three.js and JavaScript, it’s best to work with the mentioned CDN URLs.

When working with the three npm package, you also need a build based on tools like e.g. rollup.

Do you happen to know a good resource to be able to create my own build like what you said? I’m also having a hard time looking for easy to understand documentation since the threejs documentation isn’t quite detailed yet.

TBH, setting up such a build is unrelated to three.js and somewhat basic JS skills.

However, since beginners frequently struggle with this topic, there is a minimalistic project setup with three.js and rollup that you can use as a starter project:

Thank you! This is really helpful.

1 Like