ThreeDixie

The official support for Three.js allows a cleanly and easy way to import your particles.

Contents

• Instalation
• Implementation
• Important functions
  • move
  • resetMove
  • rotateX
  • rotateY
  • rotateZ
  • scaleXYZ
  • resetTransforms

Instalation

You have to add to your three.js environment two files dixieAPI.js and threeDixie.js, you can find dixieApi.js here and threeDixie.js here.

In order to work properly threeDixie imports OBJLoader, an external module for load obj. To include it properly, you must use the following structure:

//First load the API
<script type="text/javascript" src="https://github.com/Pagunasa/Dixie/blob/Dixie-Trails%26Animations/api/dixieApi.js"></script>;

//Then your main
<script type="module">
	import "your_main.js"
</script>;

And inside your main use the import clause:

//Importing three.js
import * as THREE from 'https://threejs.org/build/three.module.js';
//importing threeDixie
import { ThreeDixie } from "https://github.com/Pagunasa/Dixie/blob/Dixie-Trails%26Animations/api/ThreeDixie.js"

Implementation

The implementation is very straightforward. With only four lines you'll be able to start rendering your particles.

Inside your init function you have to create a ThreeDixie object, pass the scene and then use this object to load the graph:

let threeDixie = new ThreeDixie( scene );
threeDixie.load( graph_url, graph_directory, graph_name, position );

The threeDixie load function has the following inputs:

• graph_url → Where the JSON file is saved.
• graph_directory → Where is the main folder where the mesh and atlas folder is saved.
• graph_name → With which name you want to save the graph, if empty a default name will be set.
• position → In which position you want to set the graph, if empty will be the one defined in the editor.

It's important to disable the three.js option that automatically sorts the objects, so when you create your renderer you must do this:

renderer.sortObjects = false;

And the last line you have to write is inside the renderer animation:

threeDixie.update( dt, camera );

Where his inputs are:

• dt → The time passed, in ms, until the last frame.
• camera → The camera that you're using.

If you don't know how to compute the dt, I recommend you to use THREE.Clock(). In your init you create it:

//Initialize and start the clock
clock = new THREE.Clock();
clock.start();

And inside animation, when the update function is called you can directly put clock.getDelta().

threeDixie.update( clock.getDelta(), camera );

• 🌠 See the demo 🌠
• 🌠 My fully main.js implementation is available here 🌠

Important functions

In this part, you will find some important functions that you maybe need:

move

move( pos, graph_name );

This function allows you to move the loaded graphs. Its inputs are:

• pos → The displacement that will be applied to the system, its expected an array of size 3.
• graph_name → The name of the graph, if empty will be applied to all graphs.

resetMove

resetMove( graph_name );

This function allows you to reset the move of the loaded graphs. Its inputs are:

• graph_name → The name of the graph, if empty the reset will be applied to all graphs.

rotateX

rotateX( rad, graph_name );

This function allows you to apply a rotation in the X-axis of the loaded graphs. Its inputs are:

• rad → The angle, in radians, of the rotation.
• graph_name → The name of the graph, if empty the rotation will be applied to all graphs.

rotateY

rotateY( rad, graph_name );

This function allows you to apply a rotation in the Y-axis of the loaded graphs. Its inputs are:

• rad → The angle, in radians, of the rotation.
• graph_name → The name of the graph, if empty the rotation will be applied to all graphs.

rotateZ

rotateZ( rad, graph_name );

This function allows you to apply a rotation in the Z-axis of the loaded graphs. Its inputs are:

• rad → The angle, in radians, of the rotation.
• graph_name → The name of the graph, if empty the rotation will be applied to all graphs.

scaleXYZ

scaleXYZ( scale, graph_name );

This function allows you to apply a scale in the XYZ-axis of the loaded graphs. Its inputs are:

• scale → The scale, is expected an array of length 3.
• graph_name → The name of the graph, if empty the scale will be applied to all graphs.

resetTransforms

resetTransforms( graph_name );

This function allows you to reset all the transformations applied to the loaded graphs. Its inputs are:

• graph_name → The name of the graph, if empty the rotation will be applied to all graphs.