Three.js - SELECTED SpotLight＆dat.gui

我將SpotLight添加到我的場景以及一個OctahedronGeometry（作爲助手），以便讓用戶看到它。用戶必須能夠通過單擊它來選擇它，才能通過transformControls移動SpotLight。它的工作原理！Three.js - SELECTED SpotLight＆dat.gui

但是，選中後，我希望能夠編輯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;});

[編輯] 這是我的選擇的變量：

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

如何它可以完成嗎？

來源

2015-10-23 sRcBh

你的'SELECTED'變量是從哪裏得到的？ – gaitat

在編輯:)見上面 – sRcBh

你不需要'對象'變量！你可以使用'scene.children' –

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

有沒有訣竅。

來源

2015-10-29 08:05:08 sRcBh

我看到兩個選項，你選擇哪一個取決於你想要做什麼。

一種方法是將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 
    } 
});

來源

2015-10-26 12:44:10 gaitat

你是對的！有用！：P 如果您爲了能夠編輯SELECTED對象而同時管理SpotLight，PointLight和DirectionalLight，您會如何？ – sRcBh

您可以控制「SELECTED」的含義。 – gaitat

這是什麼意思？：s – sRcBh

-1

我做

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個射燈/ PointLight/DirectionalLights，它只適用於第一個。

來源

2015-10-26 14:24:43 sRcBh

那你怎麼能給自己正確答案的東西不起作用？ – gaitat

Three.js - SELECTED SpotLight＆dat.gui

回答

相關問題