1

当前工作代码

我试图弄清楚如何更新/更改/刷新 dat.gui 以反映我当前的选择。我的目标是生成一些随机立方体，然后选择一个立方体进行操作，例如：旋转、缩放、更改位置等。

第一步是能够选择一个立方体并能够控制一些东西，来自 dat.gui 的任何东西。在下面的示例中，我只想显示所选对象的名称。我觉得如果我解决了这个问题，我可以添加方法来控制旋转、位置等。

我正在尝试实现这样的目标，但是这段代码很旧且难以理解。

controller = new THREE.Object3D();
controller.objects = [];
controller.scene = scene;
controller.gui = gui;
controller.color = 0xFFFFFF;
controller.number_of_objects = controller.objects.length;
controller.selected_cube = 'test123';


controller.createNew = function() {
    var cube = new THREE.Mesh(
            new THREE.BoxGeometry(5, 5, 5),
            new THREE.MeshBasicMaterial({
                color: Math.random() * 0xffffff,
            opacity: 0.5})
    );

    cube.position.x = Math.random() * (world_size * 2) - world_size;
    cube.position.z = Math.random() * (world_size * 2) - world_size;
    cube.name = 'cube_' + controller.objects.length;

    controller.scene.add(cube);
    controller.objects.push(cube);
    controller.number_of_objects = controller.objects.length;
    controller.selected_cube = cube.name;

};

gui.add(controller, 'number_of_objects').listen();
gui.add(controller, 'selected_cube').listen();
gui.add(controller, 'createNew');
4

1 回答 1

3

我已经分叉了您的示例并添加了代码，以便选定的多维数据集显示在 dat.GUI 控件中：

http://jsfiddle.net/Fresh/5vbkub4v/

实现这一点的代码在这里：

    if (intersects.length > 0) {
        var selectedObject = intersects[0].object;
        selectedObject.material.color.setHex(Math.random() * 0xffffff);

        // listen() has already been applied to the dat.GUI selected_cube controller
        // so updating the value of selected_cube will cause the dat.GUI view
        // to be automatically updated.
        controller.selected_cube = selectedObject.name;

        var particle = new THREE.Sprite(particleMaterial);
        particle.position.copy(intersects[0].point);
        particle.scale.x = particle.scale.y = 2;
        scene.add(particle);
    }

这是有效的，因为：

gui.add(controller, 'selected_cube').listen();

已定义，更改 dat.GUI selected_cube 变量的值将自动反映在控制面板中。

于 2014-10-26T01:07:05.500 回答