Three.js Raycaster 未检测到场景网格

Posted 2023-02-27

【中文标题】Three.js Raycaster 未检测到场景网格

【英文标题】：Three.js Raycaster not detecting scene mesh

【发布时间】：2014-08-18 16:21:35

【问题描述】：

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

我正在尝试与我在场景中创建的一些自定义网格相交。 raycaster 似乎没有注册网格，尽管它们存在于 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();所以这不是问题（参见here）。奇怪的是场景似乎与我使用简单三角形构造的其他几何图形相交（即不使用 THREE.Shape.Utils.triangulateShape ；只是手动推动三角形顶点和面）非常好，这意味着这不能不考虑相交的画布偏移是一个问题。我检查了这两种几何形状，两者之间似乎没有任何根本区别。

有没有人知道这个问题可能是什么？

【参考方案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]) );

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

【参考方案2】：

您的问题是您将 scene.children 传递给 raycaster。

 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 );

【讨论】：

这不是解决方案。在您的示例中，scene.children 和 objects 将指向完全相同的对象。