Question

我是ThreeJS的新手，我遇到了通过光线投射挑选对象的问题。我创建了一些球体和一些线但只想在鼠标悬停时更改球体。我想我需要在光线播放代码中添加一些条件，但我不知道是什么......

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

这会创建对象：

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

这是我的光线投射：

var mouse = {
        x: 0,
        y: 0
    },
    INTERSECTED;

window.addEventListener('mousemove', onMouseMove, false);
window.requestAnimationFrame(render);

function onMouseMove(event) {
    // calculate mouse position in normalized device coordinates 
    // (-1 to +1) for both components 
    //event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    //console.log(mouse.x + " | " + mouse.y);
}

function mousePos() {
    // find intersections

    // create a Ray with origin at the mouse position
    //   and direction into the scene (camera direction)
    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
    vector.unproject(camera);

    var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    ray.linePrecision = 1;

    // create an array containing all objects in the scene with which the ray intersects
    var intersects = ray.intersectObjects(scene.children, true);

    //console.log(intersects.length);

    // INTERSECTED = the object in the scene currently closest to the camera 
    //      and intersected by the Ray projected from the mouse position    

    // if there is one (or more) intersections
    if (intersects.length > 0) {
        // if the closest object intersected is not the currently stored intersection object
        if (intersects[0].object != INTERSECTED) {
            // restore previous intersection object (if it exists) to its original color
            if (INTERSECTED)
                INTERSECTED.material.color.setHex(INTERSECTED.currentHex);

            // store reference to closest object as current intersection object
            INTERSECTED = intersects[0].object;
            // store color of closest object (for later restoration)
            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
            // set a new color for closest object
            INTERSECTED.material.color.setHex(0xEE7F00);
            //INTERSECTED.radius.set( 1, 2, 2 );
        }
    } else // there are no intersections
    {
        // restore previous intersection object (if it exists) to its original color
        if (INTERSECTED)
            INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
        //INTERSECTED.scale.set( 1, 1, 1 );
        // remove previous intersection object reference
        //     by setting current intersection object to "nothing"
        INTERSECTED = null;
    }
}

Answer 1

光线投射返回一个交叉的对象数组，这些对象本身包含有关光线命中的信息。

由于您只有球体和线条，因此您可以在几何类型intersects[0].object.geometry.type上进行分支，这可以是'LineGeometry'或'SphereGeometry'。

编辑：强制性jsfiddle，请参阅命中控制台以获取匹配输出。 http://jsfiddle.net/z43hjqm9/1/

Answer 2

为了简化鼠标的使用，您可以使用EventsControls类。尝试完成此example。

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

Answer 3

在您的代码中，

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

调用的第一个参数是一个对象，它将被评估以查看它或它的任何后代（递归为真）是否与光线相交。

因此，只需创建一个对象目标并将球体添加到它（但不是线条）。

这将使您的通话更有效

Answer 4

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

现在，无论您想要交互哪种类型的对象，都要将该数组传递给相交的as-
Visual Studio

现在只有arrayType1对象会互动。

三个JS - 如何选择一种类型的对象？

4 个答案: