Three.js model loader for 3d object (.obj) files.
- NodeJS
- node version 10.16.3
- npm version 6.9.0
- Windows OS 64 bit
- Web browser
- Chrome version 80.0.3987.149 (Official Build) (64-bit)
- Three.js
- version r114
https://muonlineph.github.io/webgl-jsonloader/
-
Clone this repository.
https://github.com/muonlineph/webgl-jsonloader.git
-
Install dependencies.
npm install
-
Run the local web server.
npm run start
-
Load the webgl json loader from
http://localhost:3000
-
Load the basic-usage object loader demo from
http://localhost:3000/simple.html
This is the recommended usage for rendering object models as all Three.js scenes are already set-up in the Viewer object.
-
Include the required Three.js files in your website (from the /public/js directory):
three.min.js
,DDSLoader.js
,MTLLoader.js
,TGALoader.js
,OBJLoader.js
. -
Include the custom loader and model viewer (from the /public directory):
loader.js
,viewer.js
-
Load your object model(s) using async-await, but do not add them to the scene. See Object Loader (Basic Usage), #4 for more usage information.
let a = await loadModel(...) let b = await loadModel(...) let c = await loadModel(...)
-
Initialize a new Viewer object with the loaded models from #1 as parameters.
const viewer = new Viewer([a, b, c])
-
Include the required Three.js files in your website (from the /public/js directory):
three.min.js
,DDSLoader.js
,MTLLoader.js
,OBJLoader.js
. -
Include the custom loader and model viewer (from the /public directory):
loader.js
,simple.js
-
Initialize a ThreeJS scene, camera and renderer. See
public/simple.js
init() for more information. -
Load ojbect model file(s) (.obj) and add to the ThreeJS scene with optional values for
position
,rotation
andscale
.let staff = await loadModel('objects/staffofkundun/', 'kundun-OBJ.mtl', 'kundun-OBJ.obj', { position: { y:10 }, rotation: { x:-Math.PI/2, y:-Math.PI/3*2, z:-Math.PI/2 }, scale: { x:2, y:2, z:2 } }) scene.add(staff)
- see
public/loader.js
for more object loading options - any number of object files can be loaded and added to the
scene
.
- see
@weaponsforge
20200320