0

我有一个问题要检测我的鼠标是否在一个粒子上方，以便使用threejs中的粒子系统将其推离鼠标

我使用光线投射器，但没有任何效果。

我也尝试向粒子添加一个碰撞箱，但碰撞箱不跟随粒子。

    for (var p = 0; p < particleCount; p++) {

// create a particle with random
// position values, -250 -> 250
var pX = Math.random() * 200 - 200 / 2,
pY = Math.random() * 150-150/2,
pZ = -5,
particle = new THREE.Vector3(pX, pY, pZ);
// create a velocity vector
particle.velocity = new THREE.Vector3(
0,              // x
Math.random()*maxVelocity, // y: random vel
0);             // z
// add it to the geometry
// add hitbox on particle
var material = new THREE.MeshBasicMaterial({color : 0x45a314});
var circleGeometry = new THREE.CircleGeometry(maxDistance, 8);
particle.hitbox = new THREE.Mesh(circleGeometry,material);
particle.hitbox.position.set(pX,pY,pZ);
particles.vertices.push(particle);
}

onmousemove 函数

   function handleMouseMove(event) {
event.preventDefault();
mousePos.x = (event.clientX / window.innerWidth) * 2 - 1;
mousePos.y = -(event.clientY / window.innerHeight) * 2 + 1;


//controle
mouse_vector.set(mousePos.x,mousePos.y,mousePos.z);

projector.unprojectVector(mouse_vector,camera);

var direction = mouse_vector.sub(camera.position).normalize();

ray.set(camera.position, direction);



 }

更新功能

   function update() {



var pCount = particleCount;
while(pCount --){
    // get the particle
    var particle = particles.vertices[pCount];

    // check if we need to reset
    if (particle.y > 80 ) {
        particle.z = -4;
        particle.x = Math.random()  * 200 - 200 / 2;
        particle.y = -75;
        particle.velocity.y = Math.random()*maxVelocity;
        // particle.velocity.x = Math.random()*0.4-0.2;
        // particle.velocity.y = Math.random()*0.4-0.2;
    }

    intersects = ray.intersectObject(particle.hitbox);

    if(intersects.length){
        console.log("hit");

    }


// and the position
particle.add(
    particle.velocity);
}
// flag to the particle system
// that we've changed its vertices.
particleSystem.geometry.__dirtyVertices = true;

// draw
renderer.render(scene, camera);

// set up the next call
requestAnimationFrame(update);
}

我的代码的小提琴

4

1 回答 1

0

要使您的碰撞箱正常工作，请确保将其添加到带有particle.add(particle.hitbox). 在这种情况下，hitbox 位置可以作为 (0, 0, 0)，因为它将添加到其父对象的确切位置。当 hitbox 是父粒子的子粒子时，也可以使用particle.children.

否则，与使用 raycaster 不同，您可以尝试检查是否有任何粒子落在光标 2D 位置的某个范围内，并遍历边界内的粒子以推开。当需要一次与多个粒子交互时，这可能是更简单的选择。希望有帮助！

于 2014-07-23T15:55:02.403 回答