Three.js Raycaster未检测到场景网格 [英] Three.js Raycaster not detecting scene mesh

问题描述

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

I am using three.js r67 in Chrome Version 35.0.1916.153 m

我试图与我在场景中创建的一些自定义网格相交.尽管它们存在于scene.children中，但射线广播程序似乎并未注册该网格.

I am attempting to intersect some custom meshes that I have created in my scene. The raycaster does not appear to be registering the meshes although they exist within 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；只是手动推动三角形顶点和面)构造的场景似乎与其他几何形状相交，这很好，这意味着是不考虑相交的画布偏移的问题.我已经检查了这两种几何形状，并且两者之间似乎没有任何根本的区别.

As in the code, I am using computeFaceNormals(); so this isn't the issue (see here). Oddly the scene seems to be intersecting other geometries that I constructed using simple triangles (i.e. not using THREE.Shape.Utils.triangulateShape ; just pushing triangle vertices and faces manually) perfectly fine which means this can't be an issue with not taking into account the canvas offset for intersecting. I have examined both geometries and there doesn't seem to be any fundamental differences between the two.

有人对这个问题可能有什么想法吗?

Does anyone have any ideas as to what the issue may be?

推荐答案

问题在于顶点的构造方式:使用字符串.尽管three.js允许您构造顶点(以及几何图形和网格)，并依次使用字符串显示几何图形，但它不允许您使用这些顶点进行光线投射.更简洁地说，该问题可以归结为:

The issue was to do with the fact with the way the vertices had been constructed: using strings. Although three.js allows you to construct the vertices (and therefore the geometry and the mesh) and in turn display the geometry using strings, it does not allow you to use those vertices for raycasting. More succinctly the issue could be reduced to:

更改此内容

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

对此:

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

我不确定这是错误还是功能，因为使用字符串格式的顶点时似乎不会引发任何错误，尽管您无法对具有字符串顶点几何形状的对象进行光线投射(可能是因为法线无法计算?).

I'm not really sure if this is a bug or a feature, as it seems that no errors are thrown when using vertices in string format, although you can't raycast on objects with string vertex geometries (possibly because the normals can't be computed?).

这篇关于Three.js Raycaster未检测到场景网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！