三個js - raycaster失敗

我有一個定義在原點的網格。三個js - raycaster失敗

var textureCanvas = new THREE.CanvasTexture(imageCanvas); 
textureCanvas.repeat.set(4, 4); 
textureCanvas.wrapS = THREE.RepeatWrapping; 
textureCanvas.wrapT = THREE.RepeatWrapping; 

var materialCanvas = new THREE.MeshBasicMaterial({ map: textureCanvas } 
); 

var geometry = new THREE.Geometry(); 
geometry.vertices.push(
    new THREE.Vector3(-4,-4,0), 
    new THREE.Vector3(-4,4,0), 
    new THREE.Vector3(4,4,0), 
    new THREE.Vector3(4,-4,0), 
); 

geometry.faces.push(     
    new THREE.Face3(3, 1, 0), 
    new THREE.Face3(3, 2, 1) 
); 

var vertexMappings = []; 
vertexMappings[0] = new THREE.Vector2(0,1); 
vertexMappings[1] = new THREE.Vector2(0,0); 
vertexMappings[2] = new THREE.Vector2(1,0); 
vertexMappings[3] = new THREE.Vector2(1,1); 
var vm = vertexMappings; 

geometry.faceVertexUvs[ 0 ] = []; 
geometry.faceVertexUvs[0][0] = [ vm[3], vm[1], vm[0] ]; 
geometry.faceVertexUvs[0][1] = [ vm[3], vm[2], vm[1] ];     

meshCanvas = new THREE.Mesh(geometry, materialCanvas); 
meshCanvas.rotation.x = - Math.PI/3; 
meshCanvas.rotation.z = - Math.PI/2.5; 

meshCanvas.scale.set(80, 80, 80); 

scene.add(meshCanvas);

我也有一條線穿過網格。它最初是通過原點，但我移動了一下（參見下面的github問題）。

var linegeo = new THREE.Geometry(); 
linegeo.vertices.push(
    new THREE.Vector3(55, 300, 0), 
    new THREE.Vector3(-10, -300, 32) 
); 

scene.add(linemesh);

我想其中線與網格的位置，但交叉結果總是空：

getInersectionPosition(linemesh, meshCanvas); 


function getInersectionPosition(linemesh, meshCanvas) { 
    linemesh.updateMatrixWorld(); 
    meshCanvas.updateMatrixWorld(); 

    var p1 = linemesh.geometry.vertices[0].clone(), 
    p2 = linemesh.geometry.vertices[1].clone(); 

    p1.applyMatrix4(linemesh.matrixWorld); 
    p2.applyMatrix4(linemesh.matrixWorld); 

    //console.log(`p1: ${JSON.stringify(p1)}, p2: ${JSON.stringify(p2)}`); 
    //console.log(`canvas position: ${JSON.stringify(meshCanvas.position)}`); 

    var raycaster = new THREE.Raycaster(p1, p2); 
    raycaster.linePrecision = 10; 

    //var intersections = raycaster.intersectObjects([meshCanvas]); 
    var intersections = raycaster.intersectObjects(scene.children, true); 

    if (intersections.length > 0) 
     console.log(`intersections: ${ intersections.length}`); 
}

全樣本：https://jsfiddle.net/mribbons/103wwsda/

是否有可能，我有這個問題？ https://github.com/mrdoob/three.js/issues/11449

raycaster.intersectObjects（）調用似乎在這裏失敗，距離（270萬左右，而sphere.radius約450）非常大的值。

https://github.com/mrdoob/three.js/blob/dev/build/three.js#L9761

intersectsSphere: function (sphere) { 
    var distance = this.distanceToPoint(sphere.center) 

    return distance <= sphere.radius; 

},

來源

2017-06-09 Michael Ribbons

我的錯誤，raycaster需要一個點和一個正常的，這樣可以解決問題：

var normal = new THREE.Vector3(); 

normal.subVectors(p2, p1).normalize(); 

var raycaster = new THREE.Raycaster(p1, normal); 

var intersections = raycaster.intersectObjects(scene.children, true); 

if (intersections.length > 0) 
    console.log(`intersections: ${ intersections.length}`); // outputs "intersections: 2"

來源

2017-06-09 06:23:44

三個js - raycaster失敗

回答

相關問題