Compose beautiful scenes with Vue.js and Three.js

Today there are already a few libraries out there to create scenes in Vue with Three.js:

- vue-gl
- vue-threejs

These libraries are good for creating simple scenes, as they allow us to easily create basic 3D content, sometimes even with physics.

For more complex scenes however, we need more control for some aspects:

  • Better and easier management of your assets and scenes
  • Creating content with pure THREE.js

vue-threejs-composer allows us to do exactly that.


Features

This library won’t include any basic geometries, materials and more advanced stuff.

It will only implement a base from which you can easily extend from, as well as implement some in-build functionalities to relieve the user of common problems experienced in normal THREE.js projects:

  1. In-build asset and scene manager
  2. Helpers for loading and instantiating 3D models.
  3. Create custom content and components with pure THREE.js code.

Now let’s dive into some examples.

Note: The following examples are only extracts to show how the components may look like. You can look up the complete examples on github.

Declarative scene composition

As in the libraries listed above, this library provides some basic components, that you can use as a base to create your components.

Organize your assets

Asset bundles will allow you to better organize your assets. Scenes will then load the given bundles and wait for all assets that need preloading. This will allow you to focus on more important aspects of your application.

Note: The properties dependencies and assets of the asset bundle and scene components can be either a string, in which multiple entries can be separated by commas, or an array of strings with the names of the asset bundles to load.

Models

How often is loading 3D models a pain? This library also includes an easy way to load this type of asset with the appropriate materials.

Note: By default, this library doesn’t include any package to handle model loading. You will have to install the loader you want to use and register the appropriate extensions in the Loader class:

Creating custom content

Most components require either a factory function or can be extended to allow the user to easily integrate their THREE.js code in components.


Finishing notes

This library has only been recently published and as such, it will probably still have some bugs here and there.

There are also a lot of aspects that can and will be improved in the future, so don’t hesitate to report any bugs or give me your feed-backs about the library.