RayCasting | 2d ray casting using raylib | Augmented Reality library

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.

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:

Given an axis-aligned uniform grid in the X/Y plane (world space) in a 3D scene and a virtual camera looking at this grid from a certain position and direction. How can I calculate the distance I need to move the camera along its line of sight so that one of the grid cells is projected onto one pixel on the screen (fills one screen pixel)? The camera projection parameters (field of view, near and far clip plane) and the width and height of the screen are known.

This base distance is to be used to determine the level of detail for rendering/raycasting a heightmap (uniform grid of elevation values). The algorithm I am trying to implement is described in the paper "Maximum Mipmaps for Fast, Accurate, and Scalable Dynamic Height Field Rendering" by Tevs et al., 2008 (see Sect. 3.3). During raycasting, the current distance between the camera and an intersection point of the ray is compared with the base distance. If the current distance is smaller than the base distance, a higher level of detail is rendered (lower mipmap level). If the current distance is greater than the base distance, a lower level of detail is rendered (higher mipmap level).

I am making an animation with moving objects in Three.js. In this animation, I create a text bubble when an object is clicked, and it has an "X" button to close it. However, if the x button overlays a 3D Object from Three.js, then the button is ignored entirely and the 3D Object gets clicked instead. How can I avoid this and instead allow this HTML content to always take priority?

I am using raycasting to detect clicks on my 3D Objects, if that is helpful. I have already tried giving the button a higher z-order, however that did not work. And, to be clear, visually the HTML content is on top of the 3D Objects.

Additionally, it would be nice if clicking in the text bubble would not fall straight through to an object beneath the text bubble.

Edit: here is the simplified code for my onclick function (works for my 3D Objects). I bound a different onclick function to specifically my button in question.

I have a low poly world and I added "gravity" with raycasting to my character. Now I need to add another raycaster in front of the character (in this case the pointer lock controls) pointing forwards (always in front of the camera and in facing the same direction) to give my character the ability to walk on a non-flat surface.

In the photo shown as 'b' being the raycaster. Then I would use trigonometry to calculate the slope in order to know if it's possible to walk there, if it is, then I would just use the offset; 'a' and the distance from the character to the intersection called 'b' to translate the camera on its local Y and Z axis.

So I started testing and came up with this:

We were able to have custom raycasting using bitmasks:

I am creating a third-person android 3d game in unity. I have set up a free look on touch script to move the camera view around the player. Below is the code. But the camera following my player is moving through the walls and objects coming in between the player and the camera. I want the camera to adjust itself if it bumps into an object (Camera is not a child of my player). Things I have tried but did not work:

1. Applying a box collider/rigidbody/material to the camera

2. Making an empty gameobject parent of camera and applying box collider/rigidbody/material to that gameobject

3. Making the camera clipping angle (near) < 0.3 This only works for 1st person but not for 3rd person.

I guess raycasting can be of help but I don't know how to implement it. Any suggestion would be of great help!

I used an item script that I found online that picks up an Item. It was intended for first-person raycasting but I changed it to detect if my player triggers the item. I wanted the item to lock to my player's hand 1 second after the animation plays. I tried invoking but I learned I can't do that with parameters. I then tried Coroutines but they were complicated and I could not get it to work. I made a new void that I invoke after 1 second which I want to start my PickItem void. However, I don't know how to do this. I don't understand how parameters work either.

here's my code, ignore unused stuff and its overal messiness

I wrote a simple web page displaying a 3D bone and using Three.js raycasting to draw dots and lines on it and it worked perfectly well. result of using raycast on full screen web page

But when I ported it to another web page having multiple windows, the process did not work.

I followed the instructions from fiddle http://jsfiddle.net/cn7ecoaa/ but still failed.

Here is the CSS: