I have implemented a SpotLight in my scene along with an OctahedronGeometry as a visual aid for the user. The SpotLight can be moved using transformControls by selecting it, which is working properly.
However, the issue arises when I try to edit the settings of the SpotLight while it is selected. Currently, I end up interacting with the geometry rather than directly manipulating the SpotLight itself.
Below is the function I am using:
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;
}
Additionally, here are the dat.gui settings I have in place:
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] Lastly, here's the SELECTED variable being used:
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);
} else{
control.detach(SELECTED);
scene.remove(control);
control.update();
$(guiObject.domElement).attr("hidden", true);
}
} else{
$(guiObject.domElement).attr("hidden", false);
}
}
Any suggestions on how I can address this issue and ensure direct editing of the SpotLight settings?