3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. This guide provides a workflow recommended for most users, and suggestions for what to try if things don't go as expected. Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.

Importing models

As seen in my train example it takes a lot of parts to create 3d models. This is still a simple example but if you start working with more complex models it will take a lot of time to create everything in WebGL. Therefore you can import models from software like cinema 4d and blender.

If possible, you should always use glTF format. It’s been specially designed for sharing models on the web, meaning that the file sizes are as small as possible and loading times will be very fast.

Example

The important and general part of any 3D library its import of external models.

In the beginning, I wanted to create diamond by code but it turned out to be difficult — a lot of lines of code. That is why I decided to import a model. Three.js has many ways to achieve that but I choose import through JSON file.

You could create a model in any 3D editor which I made in Cinema 4d. After I imported the model into ThreeJS editor. ThreeJS editor has a convenient button “publish” it export a model as a JSON file. But when I opened JSON it was very long.

I start to find another way and found that Blender also has a special exporter for three.js. And actually, it showed himself very well.

3D model inside blender

3D model inside blender

Three.js code vs blender

Three.js code vs blender

Sources