Three.js Raycaster未檢測到場景網格

Question

我在Chrome版本35.0.1916.153 m中使用three.js r67

我試圖與我在場景中創建的一些自定義網格相交。 盡管它們存在於scene.children中，但射線廣播程序似乎並未注冊該網格。

網格創建代碼：

if (modelVertices != null && modelVertices.length >= 3) {
            triangles = THREE.Shape.Utils.triangulateShape ( modelVertices, holes );

            for( var i = 0; i < triangles.length; i++ ){

               modelGeometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][2], triangles[i][2] ));

                }

            modelGeometry.computeFaceNormals();
            var modelMesh = new THREE.Mesh(modelGeometry, material);
            modelMesh.material.side = THREE.DoubleSide;
            polyhedralzGroup.add(modelMesh)
    }

射線廣播代碼：

                var projector = new THREE.Projector();
                projector.unprojectVector( vector, camera );

                var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
                //console.log("Work");
                // See if the ray from the camera into the world hits one of our meshes

                var intersects = raycaster.intersectObjects( scene.children, true );
                helper.position.set( 0, 0, 0 );
                //console.log(intersects.length);
                if ( intersects.length > 0 ) {  
                    if (intersects[ 0 ].face != null) {
                    helper.lookAt( intersects[ 0 ].face.normal );
                    helper.position.copy( intersects[ 0 ].point ); 
}

如代碼中一樣，我正在使用computeFaceNormals（）； 所以這不是問題（請參閱此處 ）。 奇怪的是，場景似乎與我使用簡單三角形構造的其他幾何形狀相交 （即不使用THREE.Shape.Utils.triangulateShape；只是手動推動三角形頂點和面），這完全意味着沒有考慮到這一點相交的畫布偏移量。 我已經檢查了這兩種幾何形狀，並且兩者之間似乎沒有任何根本區別。

是否有人對問題可能有什么想法？

Answer 1

問題與頂點的構造方式有關：使用字符串。 盡管three.js允許您構造頂點（以及幾何圖形和網格），並依次使用字符串顯示幾何圖形，但它不允許您使用這些頂點進行光線投射。 更簡潔地說，問題可以簡化為：

改變這個：

aVertex = new THREE.Vector3( part[0], part[1] , part[2] );

對此：

aVertex = new THREE.Vector3( parseFloat(part[0]), parseFloat(part[1]) , parseFloat(part[2]) );

我不確定這是錯誤還是功能，因為使用字符串格式的頂點時似乎不會引發任何錯誤，盡管您無法對具有字符串頂點幾何形狀的對象進行光線投射（可能是因為法線無法計算？）。

Answer 2

您的問題是您將scene.children傳遞給了射線發生器。

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

解決方案1.將模型加載到對象中

var objects = [];

objects.push(mesh);

接着

var intersects = raycaster.intersectObjects( objects, true );

解決方案1。

在第二個場景中傳遞您的對象，並將其傳遞給您的光線投射器

var scene_2

scene_2 = new THREE.Scene();
scene.add(scene_2);
scene_2.add(mesh);

var intersects = raycaster.intersectObjects( scene_2, true );