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)
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