current working code

我正在尝试弄清楚如何更新/更改/刷新 dat.gui 以反射(reflect)我当前的选择。我的目标是生成一些随机立方体,然后选择单个立方体进行操作,例如:旋转、缩放、更改位置等。

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

I am trying to achieve something like this , 但是这段代码很旧而且很难理解。

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'); 

请您参考如下方法:

我已经 fork 了您的示例并添加了代码,以便所选的多维数据集显示在 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 变量的值会自动 反射(reflect)在控制面板中。


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!