Three.js-选定的SpotLight和dat.gui

Question

我向场景添加了SpotLight和OctahedronGeometry（作为辅助对象），以使其对用户可见。 用户必须能够通过单击将其与transformControls一起移动以选择它。 而且有效！

但是，选择后，我希望能够编辑SpotLight设置。 问题是我正在与几何体（已选择）交互，而不是直接与SpotLight交互。

这是我的功能：

var aSpotLight = document.getElementById("addSpotLight");
aSpotLight.addEventListener("click", addSpotLight, false);

    function addSpotLight(){
        var object = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI * 0.1, 10 );
        object.name = 'SpotLight';
        var helper = new THREE.Mesh(new THREE.OctahedronGeometry(10, 0), new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: true } ));
        helper.position.set( 0, 30, 0 );
        object.position.set( 0, 30, 0 );

        scene.add(helper);
        helper.add( object );

        objects.push(object);

        renderer.render( scene, camera );
        material.needsUpdate = true;
    }

这是我的dat.gui设置：

selectedObjectAppearance = {
        lightColor : 0xffffff,
        lightDistance : 10,
        lightIntensity : 1,
        lightlightShadowDarkness : 1
    };

    guiObject.addColor(selectedObjectAppearance, 'lightColor').name('Light Color').onChange(function (e) {SELECTED.children.color = new THREE.Color(e);});
        guiObject.add( selectedObjectAppearance, 'lightDistance' ).min(1).max(15).step(0.5).name('Light distance').onChange(function (e) {SELECTED.distance = e;});
        guiObject.add( selectedObjectAppearance, 'lightIntensity' ).min(0).max(1).step(0.05).name('Light intensity').onChange(function (e) {SELECTED.intensity = e;});
        guiObject.add( selectedObjectAppearance, 'lightlightShadowDarkness' ).min(0).max(1).step(0.05).name('Light shadow darkness').onChange(function (e) {SELECTED.shadowDarkness = e;});

[编辑]这是我的SELECTED变量：

function onDocumentMouseDown(event){
    event.preventDefault();
    if($(event.target).is('canvas')){
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        var intersects = raycaster.intersectObjects(objects);
        if(intersects.length > 0){
            SELECTED = intersects[ 0 ].object;

            control.attach(SELECTED);
            scene.add(control);
            $(guiObject.domElement).attr("hidden", false);
            // SELECTED.material.color.setHex( Math.random() * 0xffffff );
        } else{
            control.detach(SELECTED);
            scene.remove(control);
            control.update();
            $(guiObject.domElement).attr("hidden", true);
        }
    } else{
        $(guiObject.domElement).attr("hidden", false);
    }
}

怎么做？

Answer 1

我看到两个选择，根据您要执行的操作选择哪个。

一种选择是将helper添加为object的子级。 然后，当您选择帮助器时，可以使用其父项来操纵值。

第二个选项是为helper添加一个名称（即helper.name = SpotLightHelper ），然后执行以下操作：

scene.traverse( function( child ) {
    if (child.name === 'SpotLightHelper') {
        // do what you want here
    }
    else if (child.name === 'PointLightHelper') {
        // do what you want here
    }
} );

Answer 2

guiObject.addColor(selectedObjectAppearance, 'lightColor').name('Light Color').onChange(function (e) {
    scene.traverse( function( child ) {
        var object = helper.children[0];

        if ((SELECTED === helper) && (child instanceof THREE.SpotLight)) {
            object.color = new THREE.Color(e);
        }
        else if ((SELECTED === helper) && (child instanceof THREE.PointLight)) {
            object.color = new THREE.Color(e);
        }
        else if ((SELECTED === helper) && (child instanceof THREE.DirectionalLight)) {
            object.color = new THREE.Color(e);
        }
    } );
});

做到了。

Answer 3

我做了

guiObject.addColor(selectedObjectAppearance, 'lightColor').name('Light Color').onChange(function (e) {
    scene.traverse( function( child ) {

        if (SELECTED.name === 'SpotLightHelper') {
            var object = scene.getObjectByName("SpotLight");
            object.color = new THREE.Color(e);
        }
        else if (SELECTED.name === 'PointLightHelper') {
            var object = scene.getObjectByName("PointLight");
            object.color = new THREE.Color(e);
        }
        else if (SELECTED.name === 'DirectionalLightHelper') {
            var object = scene.getObjectByName("DirectionalLight");
            object.color = new THREE.Color(e);
        }
    } );
});

唯一的问题是，如果我有2个SpotLights / PointLight / DirectionalLights，则只能在第一个上使用。