I am working with Vector3ds that contain plane geometries using transparent pngs for their materials.
One issue I'm facing is that the Raycaster is detecting the whole object, so even clicking near the material triggers the corresponding functions.
Is there a way to conceal the transparent parts of a mesh from the raycaster?
Thanks to Alex's help, I now have the exact point on the object.
How can I convert this into a pixel on the image to check for transparency?
I am not very familiar with Three.js, but after checking out the online documentation, it seems that the Raycasting algorithm in Three.js is based on the spatial distribution of objects rather than their composition. This means that there might not be a direct way to specify that only opaque pixels should be tested during Raycasting.
One possible approach could be to first use Three.js's
Raycast.intersectObjects(pObjects, pRecursive)To achieve this, one strategy could involve identifying the specific object that is colliding with the ray and calculating the exact point where the ray intersects with the object. This process can become more complex if your objects are scalable or if they can be rotated. By using trigonometry to determine the 3D coordinates of the intersection point relative to the ray's near and far values, you can then convert these coordinates into 2D positions corresponding to the image being used.
For example, in a simplified 2D scenario where you have a 50px² image at the origin and the ray intersects at position (25,25), you could extract and analyze the alpha values of the pixel data array to check for opacity. Since PNG images store RGBA data, each pixel requires four bytes of information stored contiguously, as shown in the following pseudocode:
byte lPixelRed = bitmap.getData()[(X + Y*bitmap.getWidth())*4];
byte lPixelGreen = bitmap.getData()[(X + Y*bitmap.getWidth())*4 + 1];
byte lPixelBlue = bitmap.getData()[(X + Y*bitmap.getWidth())*4 + 2];
byte lPixelAlpha = bitmap.getData()[(X + Y*bitmap.getWidth())*4 + 3];
After accessing the pixel data, you can examine the alpha bytes to differentiate between opaque (0xFF) and transparent (0x00) areas. This information can help determine the success of the ray-object collision detection process.
I am currently learning React-Redux and Material-UI. I'm working on creating a Sample App, but I'm facing some difficulties. I need help in improving my code. Specifically, I am trying to make the Drawer open when the Material-UI AppBar's on ...
I have multiple divs with the same class. When one of these divs is clicked, I want to change the display of the other divs to 'block'. Currently, I am using inline JavaScript for this functionality, but I would like to achieve it without inline ...
I am currently in the process of developing a straightforward web application. The main objective is to collect user input (specifically an Ethereum wallet address) and utilize the Alchemy API to display a list of transactions associated with that address. ...
I need help extracting the value from an input/textbox within a table cell. Although the rest of my code is functioning correctly, I'm struggling to retrieve the value from this particular input element. I've attempted to access the value using ...
In the process of creating a Node.js REST API for an e-commerce website using Mongoose (MongoDB), I encountered a puzzling issue. Upon testing the functionality of the orders service, everything seemed to work fine initially with one successful order. Howe ...
As someone who is just starting out with coding, I have a question about naming conventions for routes. When creating a route for adding a new user, I typically use something like this: router.post("/users", async (req, res) => {} And for l ...
<div class= "button"> <button id="More" type="submit">Click here to add more Parameters</button> <button id="Remove" type="submit">Click here to Remove Parameters</button> </div> <script> var count = 2; ...
How can I make my "Body" Svelte component rerender whenever the value of "view.current" changes in order to display the corresponding .svelte view/component? App.svelte <script> import Header from "./components/Header.svelte"; ...
I am trying to figure out how to use axios in react js to make a cURL request that is currently working. Here is the cURL request: curl -k --request GET "BASE_URL_SERVER/sendText" --form "user_id='uidxxxx'" --form "sign_id=" Every time I try to ...
Math.random() seems to always return random values instead of the mocked ones. script.test.js jest.spyOn(global.Math, "random").mockReturnValue(0.123456789); const html = fs.readFileSync(path.resolve(__dirname, "./script.html"), " ...
I am currently using AngularJS version 1.6.6 along with Gulp for my project. Here are the snippets of my code, particularly focusing on the AppLayout component: /// app-layout.component.js angular.module('app').component('appLayout&ap ...
Upon form load, I check the type of the form and dynamically load the appropriate form based on that. It was working fine, but when the form reloads to the new form, I encounter a "JavaScript" error which says "cannot execute code from freed script" in Eng ...
Why does this code work while the other one doesn't? import React from 'react' import './Card.scss' export default ({ type = 'single' }) => ( <div>{type}</div> ) Can you explain why the following code ...
Is there a way to prevent my web application from loading when the link is opened in browsers other than Chrome? Can this be achieved using Javascript or Java? I want to restrict the usage of my web application to only Chrome. Any assistance would be appre ...
When creating a geometry at the location (0,0,0) and projecting it to another point (such as @50,50,50), if the original point (0,0,0) is outside of the canvas, then the geometry becomes hidden. Is there a method to ensure the geometry always renders on t ...
A JSON response has been linked on the user's request to retrieve an excel document. The structure of the response is as follows: { "format": // file extn ----only xls "docTitle": //file name "document" :// base 64 encoded data } The attem ...
Seeking assistance urgently! I've been facing a blockage for the past two days in retrieving all my products. An error involving duplicate keys is hindering the GET action. Despite attempting various methods such as remove({}), deleteMany({}), or comb ...
Is there a way to easily generate basic shapes such as ramps, cones, and revolution shapes using only their vertices in three.js? ...
I recently followed a tutorial that showed me this code snippet: ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ //utilize the passed value to return response to the correct button ...
I've implemented multiple functions structured like this: this.something = function (which) { // Can be one or many. if (!Array.isArray(which)) { // Single input case. doSomething(which); } else { ...