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

詹姆斯·米尔纳

我在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;仅手动推动了三角形顶点和面),这完全可以实现,这意味着不考虑这一点就不会成为问题相交的画布偏移量。我已经检查了这两种几何形状,并且两者之间似乎没有任何根本区别。

物体未相交的示例

是否有人对问题可能有什么想法?

詹姆斯·米尔纳

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

Three.js使用Raycaster更改网格面颜色

来自分类Dev

Three.js raycaster交集

来自分类Dev

Three.js:for场景中每个网格的循环?

来自分类Dev

如何从内存中擦除场景和网格?Three.js

来自分类Dev

从子摄像机到场景的THREE.js光线投射

来自分类Dev

渲染THREE.js后无法添加到场景

来自分类Dev

如何在Three.js中将画布绘图添加到场景?

来自分类Dev

取消在THREE.js中将对象加载到场景中

来自分类Dev

THREE.js静态场景,检测Webgl渲染何时完成

来自分类Dev

three.js中的网格

来自分类Dev

Three.js不准确的Raycaster

来自分类Dev

容器中的three.js raycaster

来自分类Dev

如何清除THREE.JS场景

来自分类Dev

无法获得场景以Three.js呈现

来自分类Dev

在画布中渲染Three.js场景

来自分类Dev

场景中的静态对象-Three.js

来自分类Dev

Three.js获得场景的中心

来自分类Dev

使用raycaster突出显示一行网格three.js

来自分类Dev

在Three.js中绘制网格的边缘

来自分类Dev

冲突检测Three.js的问题

来自分类Dev

Three.js碰撞检测问题

来自分类Dev

在Vuetify.js组件中加载Three.js场景

来自分类Dev

使用three.js将场景渲染到自定义网格上

来自分类Dev

在 bootstrap 网格中放置一个 Three.js 场景

来自分类Dev

Three.js-导入时可以检测到几何“岛”吗?

来自分类Dev

Three.js invisible plane not working with raycaster.intersectObject

来自分类Dev

请解释three.js Raycaster方向参数

来自分类Dev

在three.js中向raycaster方向绘制线