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

我试图与我在场景中创建的一些自定义网格相交。尽管它们存在于 scene.children 中,但 raycaster 似乎没有注册网格。

网格创建代码:

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();所以这不是问题(见 here )。奇怪的是,场景 似乎与我使用简单三 Angular 形构建的其他几何图形 相交(即不使用 THREE.Shape.Utils.triangulateShape ;只是手动插入三 Angular 形顶点和面)非常好,这意味着这不是问题考虑到相交的 Canvas 偏移。我已经检查了两种几何形状,两者之间似乎没有任何根本区别。

有没有人对问题可能有任何想法?

最佳答案

问题与顶点的构造方式有关:使用字符串。尽管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]) );

我不确定这是一个错误还是一个功能,因为在使用字符串格式的顶点时似乎没有抛出错误,尽管您不能在具有字符串顶点几何形状的对象上进行光线转换(可能是因为法线不能被计算?)。

关于javascript - Three.js Raycaster 未检测到场景网格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24453821/

10-11 12:29
查看更多