Three.js 拾取无法使用自定义几何正确工作 [英] Three.js picking is not working correctly with custom geometry

问题描述

我在选择实施时遇到问题.我找到了许多不同的例子来做我想做的事，但我真的不能让它像它应该的那样工作.我主要是跟着这个例子

I have a problem with picking implementation. I found a number of different examples doing what I want, but I really cannot make it work as it should. I mainly followed this example

基本上，我的场景中有一些网格，双击其中任何一个，我想更改所选网格的颜色.在场景中有 3 个总是被选中的小立方体和一些通常没有被选中的更复杂的网格.我想知道是否有人可以帮我弄清楚为什么，如果可以选择立方体，其他人通常不能.

Basically, I have some meshes in my scene and, double clicking any of them, I'd like to change the color of the chosen one. In the scene there are 3 small cubes that are always selected and some more complex meshes that often aren't. I'd like to know if anybody can help me figuring why, if the cubes can be selected, the others often can't.

我用来检测点击网格的代码是:

The code I used to detect the clicked mesh is:

var projector = new THREE.Projector();

var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

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

if ( intersects.length > 0 ) 
{
    intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}

推荐答案

ray.intersectObject()，由 ray.intersectObjects() 调用，需要面质心.

ray.intersectObject(), which is called by ray.intersectObjects(), requires face centroids.

mesh.geometry.computeCentroids();

如果您要创建自己的自定义几何图形，这一点很重要.

This is important if you are creating your own custom geometries.

three.js r.51

three.js r.51

从 r54 开始，这不再是必要的.请参阅 WestLangley 的评论

As of r54 this is no longer necessary. See comment from WestLangley

这篇关于Three.js 拾取无法使用自定义几何正确工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！