Javascript 基于所选对象更新dat.gui
我试图找出如何更新/更改/刷新dat.gui以反映我当前的选择。我的目标是生成一些随机立方体,然后选择一个立方体进行操作,如:旋转、缩放、更改位置等 第一步是能够选择一个多维数据集,并能够控制dat.gui中的任何内容。在下面的示例中,我只想显示选定对象的名称。我觉得如果我解决了这个问题,我可以添加控制旋转、位置等的方法 ,但此代码很旧,很难理解Javascript 基于所选对象更新dat.gui,javascript,three.js,dat.gui,Javascript,Three.js,Dat.gui,我试图找出如何更新/更改/刷新dat.gui以反映我当前的选择。我的目标是生成一些随机立方体,然后选择一个立方体进行操作,如:旋转、缩放、更改位置等 第一步是能够选择一个多维数据集,并能够控制dat.gui中的任何内容。在下面的示例中,我只想显示选定对象的名称。我觉得如果我解决了这个问题,我可以添加控制旋转、位置等的方法 ,但此代码很旧,很难理解 controller = new THREE.Object3D(); controller.objects = []; controller.scen
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');
我对您的示例进行了分叉,并添加了代码,以便在dat.GUI控件中显示选定的多维数据集: 实现这一点的代码如下:
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选定的\u多维数据集变量的值将自动
反映在控制面板中。没问题@Jared,很高兴我能提供帮助:)但您并不是真正更改GUI指向的对象以解析其属性,您只是直接使用示例更改一个属性。如何使用此选项来修改3d场景中选定对象的X、Y、Z位置或任何其他属性?似乎必须为此制作某种代理对象?