Three.js ThreeJS-如何仅拾取一种类型的对象？

我是3JS新手，我对通过光线投射拾取对象有问题。我已经创建了一些球体和一些线条，但只想在鼠标上方更改球体。我想我需要在raycast代码中添加一些条件，但我不知道

这是我的代码，希望任何人都能提供帮助：

这将创建以下对象：

var numSpheres = 10;
var angRand = [numSpheres];
var spread = 10;
var radius = windowY/5;
var radiusControl = 20;

//sphere
var sphereGeometry = new THREE.SphereGeometry(0.35, 100, 100);

//line
var lineGeometry = new THREE.Geometry();
var lineMaterial = new THREE.LineBasicMaterial({
    color: 0xCCCCCC
});

//create dynamically
for (var i = 0; i < numSpheres; i++) {

    var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x334455});
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    var line = new THREE.Line(lineGeometry, lineMaterial);

    angRand[i] = Math.floor((Math.random() * 360) + 1);//random angle for each sphere/line
    var radiusIncr = spread * (angRand[i]+200)/180;
    var xPos = Math.cos((360/numSpheres * (i) + angRand[i]/2 )) * (radius - radiusIncr);
    var yPos = Math.sin((360/numSpheres * (i) + angRand[i]/2 )) * (radius - radiusIncr);
    var offsetY = Math.floor((Math.random()*5)+1);

    sphere.position.x = xPos/radiusControl;
    sphere.position.y = yPos/radiusControl + offsetY; 

    lineGeometry.vertices.push(
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(sphere.position.x, sphere.position.y, 0)
    );

    scene.add(sphere);
    scene.add(line);
}

---

光线投射返回一个对象的相交数组，该数组本身包含有关光线击中的对象的信息

由于您只有球体和直线，因此可以在几何体类型上分支

相交[0]。object.geometry.type

，它可以是

'LineGeometry'

或

'SphereGeometry'

编辑：jsfiddle，点击输出见控制台。

---

要简化鼠标操作，可以使用类EventsControl。试着挺过去

EventsControl=新的EventsControl（camera、renderer.doElement）；
EventsControl.attachEvent（'mouseOver'，function（）{
this.container.style.cursor='pointer'；
this.mouseOvered.material=selMaterial；
... 
});
EventsControl.attachEvent（'mouseOut'，function（）{
this.container.style.cursor='auto'；
this.mouseOvered.material=自动序列；
...
});
//
函数render（）{
eventsControl.update（）；
控件更新（）；
渲染器。渲染（场景、摄影机）；
}

在您的代码中

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

调用的第一个参数是一个对象，将对该对象进行求值，以查看它或其任何子体（recursive为true）是否与光线相交

因此，只需创建一个对象目标并向其添加球体（而不是直线）

---

这将使您的呼叫更加有效。

1.使用不同的数组放置不同的对象
a、 对于所有objectType1，在scene.add（objectType1）->do array1.push（objectType1）之后 b、 对于所有objectType 2，在scene.add（objectType2）->do array2.push（objectType2）之后

现在，无论您想要交互哪种类型的对象，都将该数组作为-

var intersects=raycaster.intersectObjects（arrayType1，true）

现在只有arrayType1对象将进行交互。
正确的语法是什么<代码>相交[0]。object.SphereGeometry

？找到以下内容：

var intersects=ray.intersectObjects（[sphere]）

但是我不知道如何扩展我下面的代码，以便它可以与所有球体一起工作。。（来源：）几何体的type属性是一个字符串，所以您可以检查您点击的几何体类型，如

开关（与[0]相交）。object.geometry.type）{case'LineGeometry'：doSomething（）；break；case'SphereGeometry'；doSomethingElse（）；break；默认值：break:}

我更正了错误

<script src="js/controls/EventsControls.js"></script>

EventsControls = new EventsControls( camera, renderer.domElement );

EventsControls.attachEvent('mouseOver', function() {

    this.container.style.cursor = 'pointer';
    this.mouseOvered.material = selMaterial;
    ... 

});

EventsControls.attachEvent('mouseOut', function() {

    this.container.style.cursor = 'auto';
    this.mouseOvered.material = autoMaterial;
    ...

});

    //

    function render() {
           EventsControls.update();
           controls.update();
           renderer.render(scene, camera);
    }

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