Question

我有一个简单的three.js场景，我想让用户自定义汽车模型。操纵单个物体的位置和旋转没有问题。我希望用户能够在单个dat.Gui滑块上扩展汽车的轴距。前轮向前移动，后轮向后移动。

我能够让它与相对位置一起工作 - 只是想知道是否有更清洁的方式。 dummyA和dummyC从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

有一个如何做到这一点的例子：

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://cdnjs.cloudflare.com/ajax/libs/three.js/91/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>

将多个对象添加到单个dat.GUI滑块？

1 个答案: