Import 3D models to three.js

Original article with code snippets (recommended): https://gabriellazcano.com/blog/import-models-to-three-js/

I’ve found threejs pretty tricky at the current state of the library. They are always making improvements and breaking some applications with the new updates. So here, I"m going to talk about how I’ve found it’s good to structure your threejs application for importing 3D objects. Here is a working example.

https://gabriellazcano.com/blog/import-models-to-three-js/

The current version of threejs doesn't require any special tags in the HTML, only the <script type="module"> tag where we are going to develop the logic of the program.

When using type="module" we can use the features of es5 such as import so we are going to use them. We have to import threejs and GLTFLoader. And any other component you use, such as OrbitControls. I'm going to define some variables gloablly as I'm assigning them afterwards in the init() function. You can extend on the configuration in this function in the documentation

For adjusting the size when changing resizing the window we have to add an event listener and to change both the aspect ratio and the size of the renderer.

Now we have to load the object and define the lighting for the scene.

To add a simple animation rotation to the model we have to add or substract to the rotation of the object in every animation frame, for example. However, there are much more ways of animating and with different purposes.