Pixi3D attempting to cast ray onto a plane

Question

Pixi3D attempting to cast ray onto a plane

Having trouble with raycasting in the pixi3D library and finding the documentation lacking.

I'm attempting to make a 3D object track the mouse coordinates on a 3D plane in space.

https://i.sstatic.net/DiTzY.jpg

The goal is for the black box to follow the mouse, but so far it isn't working as expected.

This is my approach:

Firstly, creating 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 attempt to intersect a ray with 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);
        }

Seeking guidance from someone experienced with the pixi3D API who can help me out?

javascript typescript raycasting pixi.js plane

Answer 1

Answer №1

Here is a possible solution:

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

document.addEventListener("mousemove", event => {
  const ray = PIXI3D.Camera.main.screenToRay(event.x, event.y);
  const distance = plane.rayCast(ray);
  const point = ray.getPoint(distance);
  // Assuming 'model' represents a 3D object
  model.position.array = point;
});

Answer 2

Here is a possible solution:

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

document.addEventListener("mousemove", event => {
  const ray = PIXI3D.Camera.main.screenToRay(event.x, event.y);
  const distance = plane.rayCast(ray);
  const point = ray.getPoint(distance);
  // Assuming 'model' represents a 3D object
  model.position.array = point;
});

Pixi3D attempting to cast ray onto a plane

Answer №1

Similar questions

Encountering Build Issue: "NgSemanticModule is not recognized as an NgModule" persists despite inclusion of dependencies and importing into primary module

I am looking to retrieve information from mongodb and then transform it into a JSON object using node.js. Can you guide

Locate the parent element using a unique child element, then interact with a different child element

Tips for utilizing ng-repeat with standard JSON data structures

"Troubleshooting: Resolving 404 Errors with JavaScript and CSS Files in a Vue.js and Node.js Application Deploy

Specify the controller to be used dynamically in an Angular directive

Detecting readiness of video playback on mobile devices using Three.js

When converting to TypeScript, the error 'express.Router() is not defined' may

I'm puzzled by the inconsistency of my scrolltop function on mobile, as it seems to be scrolling to various parts of the page depending on my

Include More Items in JSON Encoded List

Updating multiple records in Node.js with mongoose using a file as the source of data

The issue persists with the program continuously using the incorrect GET request method

Updating a reactive data within the axios response callback in the setup option of Vue 3

How can I troubleshoot the unresponsive remove div function on my website?

Show/Hide sections of content that transition and rearrange the layout of the page

What is the best way to remove all elements in jQuery?

Express req.files returns null when using jQuery FormData

Exploring React hook functionalities can lead to discovering unexpected issues such as cyclic dependencies on location.hash when

Why does the outcome of running this code vary each time?

Pile of memory depletion