adding multiple objects to a single dat.GUI slider? - three.js

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

Answer 1

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>