Project Research: Loading 3D models From MAYA to WebGL with Three.JS

The implementation of custom 3D models within the scene will be a vital feature of the application. In this post I undertake some early research to identify methods from which I can import geometry from 3D design packages.

My application will include models primarily developed via Autodesk Maya and textured with Substance Painter. I have researched a number of optimised methods and techniques from which 3D models can be exported from Maya and imported for usage within the Three.JS scene.

sing the examples from the Three.JS website, it soon became clear that the pre-packaged JSON loader will provide an ideal solution to this issue. In turn, Maya models will need to be exported as JSON files and placed within the Three.JS scene to be successfully integrated within the browser environment.

CODE SAMPLE:

jsonloader

The code above was taken from the Three.JS official documentation. Thankfully the process of setting up a JSON loader is a straightforward task. In turn, all that is needed is a quick instantiation of the JSON loader. This is followed by a function which uses the JSON loader which was just defined to import geometry and textures which are then packaged into a Three.JS mesh. This mesh can be held in a variable and then finally added to the 3D scene.

Moreover, I can introduce looping methods in order to optimise the JSON loading process. This will save me both the time and effort of writing repetitive code whilst also improving application efficiency.

Effective rendering of models, textures and shaders will prove to be a potentially pivotal area in which my 3D application’s appearance and performance rests on. As a fullback solution I have decided that the project could potentially implement primitive materials such as lambert shaders instead of high density UV texturing. This will improve the speed at which the application can be loaded and rendered, moreover it would save myself a substantial amount of time in the 3D modelling process.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s