miniCAD

Makes a floating mini CAD to easily edit objects in three.js scenes.
miniCAD can controls objects of three.js complexe scenes.

powered by georgealways lil-gui https://github.com/georgealways/lil-gui/

for three.js https://threejs.org/

import {MiniCAD} from './miniCAD/miniCAD.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
const box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({color: 0xffffff}));

const miniCAD = new MiniCAD(scene, camera);

miniCAD.add(box, "Box 1");

GETTING STARTED
Copy the miniCAD folder in your projet, then import MiniCAD : import {MiniCAD} from './miniCAD/miniCAD.js';
Create a new instance of the miniCAD : const miniCAD = new MiniCAD(scene, camera);
Start to add objects you want to adjust : miniCAD.add(box, "Box 1");
To use the animation tools add the renderer to the declaration const miniCAD = new MiniCAD(scene, camera, renderer);

NEW
Saving is available in 2 formats : as a JS Object or as written code.

UP COMING

• Possibility to add custom object (for example shader uniforms)
• Timeline for the Camera Travelling Path to adjust travelling time between points of the curve

CONSTRUCTOR
MiniCAD(scene, camera, renderer)

• scene - three.js scene
• camera - three.js camera
• renderer (optional) - three.js renderer of the scene, need for animation tools, can be add later with a method
  
  

METHODS
miniCAD.add(obj, "name");

Adds an object to the miniCAD

• obj - the object to add to the miniCAD
• name - name given to the object, this name will be displayed in the miniCAD, if name identical, it will be incremented
  
  

miniCAD.controls(controls);

• controls - three.js controls of the scene
  
  

miniCAD.renderer(renderer);

• renderer - three.js renderer of the scene

Options and settings

Some options can be toggled on and off in the settings.json

• Pointer selector : output the name given to a mesh by miniCAD.add() in the top left corner to easily find a particular mesh. A mouse click will select an object. Also works in the pointer lock. As for now only works for meshes.
• Up and Down : adds 1 to camera y position with up and down key to quickly reposition the camera. up and down keys can be remapped in the settings.json, by default they are the up and down arrows
• Tranformation Tools, keys can be remapped

Transformation Tools

toolGui is designed to move objects easily using the three.js TransFormControls.
It can be disabled in the settings.

To use it the renderer must be pass as an argument in the definition of the miniCAD
It can also be passed using the method .renderer :

miniCAD.renderer(renderer);

In the miniCAD, an object must be selected with the dropdown menu to enable the transformation tools.
Then the transformation tools can be picked up by pressing T (default key) or enabled in the left GUI.
Translate, scale and rotaiton are the three tools available.

The "exit" button can helped to relock a pointerLockControls if used.

Animation tools

Animation tools are a new and experiemental feature of the miniCAD. It allows you to creates three.js CatmullRomCurve3 paths from a set of points that you can create.
Especially the Camera Heading Path that is still work in progress.
Renderer is needed for these tools.

There is three types of paths available :

• BasicPath : is a simple path
• AnimationPath : is a path that objects of the scene can follow around
• CameraTravellingPath : is a set of two paths. One is the path camera follows, the other the trajectory of the point the camera is looking at. This type of path supports only PointerLockControls
  
  Paths can be exported as an array of points. Futur version of the miniCAD will allow user to import paths from an array of points;