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

回答

相关问题