我可以將一個不可見的邊界框添加到three.js場景嗎？

我想檢測一個對象的邊界框上的點擊（而不僅僅是對象本身 - 更可點擊的區域）。當我加載像這樣的對象：我可以將一個不可見的邊界框添加到three.js場景嗎？

var loader2 = new THREE.ObjectLoader(); 
 
      loader2.load("models/Platform/Platform.json", function(object, materials){ 
 
      object.rotation.x = - (Math.PI/2); 
 
      object.rotation.y = Math.PI; 
 
      object.scale.set(.025, .025, .025); 
 
      object.position.set(0, 1, .4); 
 
      var bbox = new THREE.BoundingBoxHelper(object, 0xffffff); 
 
      bbox.update(); 
 
      scene.add(object); 
 
      scene.add(bbox); 
 
      objects.push(bbox); 
 
      });

而且檢測到點擊這樣的：

raycaster = new THREE.Raycaster(); 
 
     mouse = new THREE.Vector2(); 
 
     
 
     document.addEventListener('mousedown', onDocumentMouseDown, false); 
 
     document.addEventListener('touchstart', onDocumentTouchStart, false); 
 
     
 
     window.addEventListener('resize', onWindowResize, false); 
 
     
 
     function onDocumentTouchStart(event) { 
 
      event.preventDefault(); 
 
      event.clientX = event.touches[0].clientX; 
 
      event.clientY = event.touches[0].clientY; 
 
      onDocumentMouseDown(event); 
 
     } 
 
     function onDocumentMouseDown(event) { 
 
      console.log("here"); 
 
      event.preventDefault(); 
 
      mouse.x = (event.clientX/renderer.domElement.clientWidth) * 2 - 1; 
 
      mouse.y = - (event.clientY/renderer.domElement.clientHeight) * 2 + 1; 
 
      raycaster.setFromCamera(mouse, camera); 
 
      console.log(mouse.x); 
 
      console.log(mouse.y); 
 
      var intersects = raycaster.intersectObjects(objects, true); 
 
      if (intersects.length > 0) { 
 
      console.log("click"); 
 
      }

邊框顯示正確，和我可以點擊它!!!!!然而，邊界框是在屏幕上可見：

我想要的邊框爲透明/不可見/隱藏。有什麼辦法可以將邊界框附加到可點擊但不可見的對象上？

我讀到，使邊界框不可見我應該刪除scene.add（bbox）; （不是將它添加到場景中），但是如果我這樣做，那麼它不在場景中，射線相交，因此點擊未被註冊。

解決方案？

非常感謝！

來源

2016-12-07 Mary7678

material.opacity = 0，例如。 – prisoner849

謝謝，@ prisoner849！這有幫助！我添加了bbox.material.opacity = 0 ;.現在它顯示出更少的線條，但點點滴滴依然顯示出來。不要以爲不透明度小於0？ ;） – Mary7678

也'material.transparent = true;' – prisoner849

你可以嘗試將材料設置爲不可見：

bbox.material.visible = false;

來源

2016-12-08 10:34:32 tomacco

謝謝，@tomacco！這也適用！ – Mary7678

'needsUpdate'標誌不應該被要求。 – WestLangley

@WestLangley是正確的！它的工作原理沒有bbox.material.needsUpdate = true ;. – Mary7678

因此，似乎有（至少）兩種解決方案。

至於建議由@ prisoner849：

bbox.material.opacity = 0; 
 
bbox.material.transparent = true;

至於建議的@tomacco和完善由@WestLangley：

bbox.material.visible = false;

這兩種解決方案都適合我！

來源

2016-12-08 21:45:31 Mary7678

我可以將一個不可見的邊界框添加到three.js場景嗎？

回答

相關問題