Three.js - SELECTED SpotLight & dat.gui

Question

J'ajoute un SpotLight à ma scène et un OctahedronGeometry (comme assistant) afin de le rendre visible par l'utilisateur. L'utilisateur doit être en mesure de déplacer le SpotLight avec les transformControls en cliquant dessus pour le sélectionner. Et il fonctionne ! Mais, lorsque cette option est sélectionnée, je souhaite pouvoir modifier les paramètres SpotLight. Le problème est que j'interagis avec la géométrie (qui est sélectionnée) et non avec le SpotLight directement.

Voilà ma fonction:

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; 
    } 

Et voici mes paramètres 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;}); 

[EDIT] Et voici ma variable sélectionnée:

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

Comment cela pourrait-il être fait?

Answer 1

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

L'astuce.

Answer 2

Je vois deux options et celle que vous suivez dépend de ce que vous voulez faire.

Une option consiste à ajouter le helper en tant qu'enfant de votre object. Ensuite, lorsque vous sélectionnez l'assistant, son parent est disponible pour manipuler les valeurs.

La deuxième option est d'ajouter un nom à la helper (c.-à-helper.name = SpotLightHelper) puis faire:

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

Answer 3

j'ai fait

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

Le seul problème est que, si j'ai 2 projecteurs/PointLight/DirectionalLights, cela ne fonctionne que sur le premier.