Home > OS >  Pixi3d trying to raycast to plane
Pixi3d trying to raycast to plane

Time:02-16

I'm trying to get raycasting to work in the pixi3D library. However the documentation is not very helpful.

What I am trying to do is make a 3d object follow the mouse coordinates on a 3d plane in space.

enter image description here

The black box should follow the mouse but I'm not getting it to work.

This is what I've come up with:

First I've created the plane:

let normalTest = new Float32Array(3);
normalTest[0] = 0;
normalTest[1] = 0;
normalTest[2] = 1;
planeTest = new Plane(normalTest, 100);

Then in my loop I try to get a ray to intersect the plane:

let ray = Camera.main.screenToRay(l.mouseX(), l.mouseY(), {height: 1920, width: 1080 });
if(ray != undefined){
    let rayRes = planeTest.rayCast(ray);
    let rayPoint = ray.getPoint(planeTest.rayCast(ray));
    myBlackBox.x = rayPoint[0];
    myBlackBox.y = (-l.mouseY()/100);
}

Is anyone else here familiar with the pixi3D API who can show me the way?

CodePudding user response:

This should work:

let plane = new PIXI3D.Plane(new Float32Array([0, 1, 0]), 0.8)

document.addEventListener("mousemove", e => {
  let ray = PIXI3D.Camera.main.screenToRay(e.x, e.y)
  let distance = plane.rayCast(ray)
  let point = ray.getPoint(distance)
  // model is my 3d object
  model.position.array = point
})
  • Related