обновление dat.gui на основе выбранного объекта

текущий рабочий код

Я пытаюсь выяснить, как обновить/изменить/обновить 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');

javascript three.js dat.gui
person Jared    schedule 04.08.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я разветвил ваш пример и добавил код, чтобы выбранный куб отображался в элементе управления 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();

уже определено, изменение значения переменной selected_cube dat.GUI будет автоматически отражено в панели управления.

person Ben Smith    schedule 26.10.2014
comment
Нет проблем @Jared, рад, что смог помочь :) - person Ben Smith; 27.10.2014
comment
Но на самом деле вы не меняете объект, на который указывает GUI, чтобы разрешить его свойство, вы просто меняете одно свойство непосредственно в своем примере. Как вы могли бы использовать это, например. изменить положение X, Y, Z или любое другое свойство выбранного объекта в 3D-сцене? Кажется, для этого нужно было бы сделать какой-то прокси-объект? - person Johncl; 28.04.2021