Threejs raycaster only only close close

我正在關注如何使用raycasting處理可點擊對象的mrdoobs示例。我也看過許多類似的問題，並嘗試過無數的事情。光線投射工程...如果我在距離小於1.Threejs raycaster only only close close

儘管（默認值），Raycaster設置爲接近0和遠無窮大。我還沒有看到任何設置距離的代碼示例。

我希望有另一雙眼睛。

// snippet 
glow.clickables = []; 
var cubeGeo = new THREE.CubeGeometry(2, 2, 2); 
cubeGeo.computeFaceNormals(); 
var cube = new THREE.Mesh(cubeGeo, redmat); 
cube.position.y = 10; 
cube.position.x = 0; 
cube.position.z = -12; 
cube.overdraw = true; 
glow.Vis.scene.add(cube); 
glow.clickables.push(cube); 
onclick_(); 

var onclick_ = function() { 
    $('#world').on('mousedown', function(e){ 
     var mouseX = (event.offsetX/$('#world').width()) * 2 - 1; 
     var mouseY = - (event.offsetY/$('#world').height()) * 2 + 1; 
     var vector = new THREE.Vector3(mouseX, mouseY, 0.1); //what should z be set to? 
     //console.info(vector); // A vector between -1,1 for both x and y. Z is whatever is set on the line above 
     projector.unprojectVector(vector, glow.Vis.camera); 
     var conts = glow.Vis.controls.getObject().position; // control 3dObject which the camera is added to. 
     var clickRay = new THREE.Raycaster(conts, vector.sub(conts).normalize()); 
     var intersects = clickRay.intersectObjects(glow.clickables); 
     console.info(intersects.length); 
     if(intersects.length > 0) { 
      alert("Click detected!"); 
     } 
    }); 
}

來源

2013-07-28 user508771

不太確定，但我認爲矢量Z應該設置爲1.0，並且感覺相當合理，小於這可能導致遠處的交叉點不被檢測到。 – yaku

謝謝！設置爲1固定我的問題 – user508771

我使用的，對我來說，適用於較大的距離如下：

var projector = new THREE.Projector(); 
    function onDocumentMouseDown(event) { 

     event.preventDefault(); 

     var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, 0.5); 
     projector.unprojectVector(vector,camera); 

     var raycaster = new THREE.Raycaster(camera.position,vector.sub(camera.position).normalize()); 
     var intersects = raycaster.intersectObjects([sphere,cylinder,cube]); 

     if (intersects.length > 0) { 
      intersects[ 0 ].object.material.transparent=true; 
      intersects[ 0 ].object.material.opacity=0.1; 
      console.log(intersects[0]); 
     } 
    }

這只是設置的第一選擇對象半透明。完整的例子是：（！或遠或近，不管）https://github.com/josdirksen/learning-threejs/blob/master/chapter-09/02-selecting-objects.html

來源

2013-07-28 10:03:09

嗯。我沒有看到任何可辨別的差異。我的raycaster確實有效。不幸的是，我只需要非常接近對象。 – user508771

對於鼠標的檢測，做到這一點：

var pointerDetectRay, projector, mouse2D;

把這個在您的init（）函數：

在全局把這個：

pointerDetectRay = new THREE.Raycaster(); 
pointerDetectRay.ray.direction.set(0, -1, 0); 
projector = new THREE.Projector(); 
mouse2D = new THREE.Vector3(0, 0, 0);

把這個在您的渲染（）循環功能：

pointerDetectRay = projector.pickingRay(mouse2D.clone(), camera);

這是你的鼠標事件：

function onDocumentMouseMove(event) { 
    event.preventDefault(); 
    mouse2D.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse2D.y = -(event.clientY/window.innerHeight) * 2 + 1; 
}

現在，每一個地方，你要檢測你的鼠標指針下的對象，使用此：

var intersects = pointerDetectRay.intersectObjects(scene.children); 
if (intersects.length > 0) { 
    var intersect = intersects[0]; 
    // intersect is the object under your mouse! 
    // do what ever you want! 
}

來源

2013-07-29 05:36:23

有趣的是，這似乎是在Chrome瀏覽器中的高分辨率「漂移」：http://stackoverflow.com/questions/21919580/threejs-mouse-interaction-with-large-resolutions 例如：http://jsfiddle.net/ lookitscook/3FSxj/ –

這個答案可悲的是不再適用於最後階段ThreeJS –

設置鼠標的位置這種方式是更準確。

 var rect = renderer.domElement.getBoundingClientRect(); 
     mouse.x = ((event.clientX - rect.left)/rect.width) * 2 - 1; 
     mouse.y = - ((event.clientY - rect.top)/rect.height) * 2 + 1;

來源

2017-05-19 00:17:55 Doguleez

簡單，容易，它的工作原理 – dat3450

Threejs raycaster only only close close

回答

相關問題