Skip to content

A package which create THREE.js controls on Dat.GUI

Notifications You must be signed in to change notification settings

SolalDR/three-dat.gui

Repository files navigation

three-dat.gui

A package which create THREE.js controls on Dat.GUI

live example

Install

First install the npm package

npm install three-dat.gui

Or with yarn

yarn add three-dat.gui

How to use

Let's create a simple THREE.js example which display a gui controller for our THREE.MeshStandardMaterial

import Dat from 'dat.gui';
import init from 'three-dat.gui'; // Import initialization method
init(Dat); // Init three-dat.gui with Dat

/* 
... init scene, renderer & camera
*/

var gui = new Dat.GUI();
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new MeshStandardMaterial();
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

gui.addMaterial('standard_material', material);

You can add quickly many kind of THREE.js objects.

  • THREE.Material with gui.addMaterial("name", material)
  • THREE.Light with gui.addLight("name", light)
  • THREE.Vector with gui.addVector("name", vector)
  • THREE.Scene with gui.addScene("name", scene)
  • THREE.Object3D with gui.addObject3D("name", object)
  • THREE.Mesh with gui.addMesh("name", mesh)
  • THREE.Fog with gui.addFog("name", fog)
  • THREE.FogExp2 with gui.addFogExp2("name", fog)

Todo

  • Add helpers on THREE.Object3D
  • Refactoring
  • Climate

About

A package which create THREE.js controls on Dat.GUI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published