adding multiple objects to a single dat.GUI slider?

Question

I have a simple three.js scene with a car model that I want users to customize. I have no problem manipulating the positions and rotations of single objects. I'd like the user to be able to expand the wheelbase of the car on a single dat.Gui slider. Front wheels move forward, rear wheels move back.

I was able to get it to work with relative positions - Just wanted to know if there was a cleaner way. dummyA and dummyC take there info from dummyB

gui.add(dummyB.position,'x').min(8).max(15).name('Wheel Base');

    function animate() {
        requestAnimationFrame( animate )
        render();
        dummyA.position.x = dummyB.position.x * -1;
        dummyC.scale.x = (dummyB.position.x * 1.75)-8;
    }

-Thanks

Welcome to Stackoverflow! Please, read about [ask] and [mcve]. — prisoner849, Apr 13 '18 at 22:17

prisoner849 · Answer 1 · 2021-11-08T06:45:11.213

There's an example of how you can do it:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-5, 5, 5);
var renderer = new THREE.WebGLRenderer({
  antialis: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));


var params = {
  width: 2,
  length: 4,
}

// wheels
var wheels = [];
setWheel(new THREE.Vector3(-params.length * .5, 1, -params.width * 0.5));
setWheel(new THREE.Vector3(params.length * .5, 1, -params.width * 0.5));
setWheel(new THREE.Vector3(-params.length * .5, 1, params.width * 0.5));
setWheel(new THREE.Vector3(params.length * .5, 1, params.width * 0.5));

function setWheel(position) {
  let wheelGeom = new THREE.CylinderGeometry(1, 1, 0.25);
  wheelGeom.rotateX(-Math.PI * 0.5);
  let wheel = new THREE.Mesh(wheelGeom, new THREE.MeshBasicMaterial({
    color: "yellow",
    wireframe: true
  }));
  wheel.position.copy(position);
  wheels.push(wheel);
  scene.add(wheel);
}

var gui = new dat.GUI();
gui.add(params, "width", 1, 3).onChange(setWidth);
gui.add(params, "length", 3, 5).onChange(setLength);

function setWidth(value) {
  wheels.forEach(w => {
    w.position.setZ(value * 0.5 * Math.sign(w.position.z));
  });
}

function setLength(value) {
  wheels.forEach(w => {
    w.position.setX(value * 0.5 * Math.sign(w.position.x));
  });
}

render();

function render() {
  requestAnimationFrame(render);
  wheels.forEach(w => {
    w.rotation.z += 0.01;
  });
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.min.js"></script>

adding multiple objects to a single dat.GUI slider?

1 Answers1