Question

我定义了一个在原点的网格物体。

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;

},

Answer 1

我的错误，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"

三个js - raycaster失败

1 个答案: