Trouble ensues when using a scaled THREE.Sprite with THREE.Raycaster

My goal is to implement the use of THREE.Raycaster in order to display an html label whenever a user hovers over an object. The functionality works properly when using THREE.Mesh, however, with THREE.Sprite, I am noticing a strange spacing issue that seems to increase along with the scale of the object.

The process for creating both scenarios remains the same, with the only variation being the type chosen based on the USE_SPRITE variable.

if ( USE_SPRITE ) {

  // using SpriteMaterial / Sprite
  m = new THREE.SpriteMaterial( { color: 0xff0000 } );
  o = new THREE.Sprite( m );

} else {

  // using MeshBasicMaterial / Material
  m = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
  o = new THREE.Mesh(new THREE.PlaneGeometry( 1, 1, 1 ),  m );

}

https://plnkr.co/edit/J0HHFMpDB5INYLSCTWHG?p=preview

I'm unsure whether this spacing issue is a bug related to THREE.Sprite or if there's an error in my implementation. Any help would be greatly appreciated.

Using three.js r73

javascriptthree.js

Answer №1

It seems there is a small issue in the functionality of three.js version 75.

When it comes to raycasting with meshes in three.js, the precision is flawless. However, when dealing with sprites, the accuracy may be compromised as it involves approximations.

Sprites in three.js always maintain their orientation towards the camera, allowing for different x-scale and y-scale adjustments (making them non-square), and even rotation (

sprite.material.rotation = Math.random()
).

In THREE.Sprite.prototype.raycast(), a simple adjustment can significantly improve the performance:

var guessSizeSq = this.scale.x * this.scale.y / 4;

This modification should enhance the handling of square sprites. Currently, the sprite is treated as a disk which may lead to missing the corners during raycasting.

Version 75 of three.js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage the power of TypeScript by enabling the noImplicitAny flag when working

Currently, I am looking to activate the noImplicitAny flag in my compiler. My main issue lies with utilizing lodash/fp as there are no typings available at this moment. Due to this, the compiler is generating errors due to the absence of a definition file ...

javascripttypescripttypescript-typings

What is the method for transmitting a YAML file in the form of a base64 encoded string?

I am attempting to transmit a yaml file as a base64 string in order for this code to function: const response = await octokit.request('GET /repos/{owner}/{repo}/git/blobs/{file_sha}', { owner: 'DevEx', repo: 'hpdev-content&apos ...

javascriptnode.jsexpressyaml

Extracting textual information from Wikipedia through iframes?

Currently, I am working on a website project utilizing Squarespace. This site will feature multiple pages dedicated to individuals who have reached a level of notability worthy of having their own Wikipedia page. With over 150 pages planned, manually writi ...

javascripthtmlcssiframewikipedia

The absence of a type annotation for `T` has been noted

Attempting to create code with a simple JavaScript function: filterArray(user: any, items: Array<Object>) { items = items.filter(item => {return true;}); return items; } Encountering the following error: Error message: Missing type anno ...

javascriptnode.jsnpmflowtype

Updating the value within a nested array in a ReactJS application

Check out the working code here: https://codesandbox.io/s/broken-https-2i454?file=/src/App.js I'm currently using Material UI within my reactjs project and facing an issue updating the value entered in a textfield of a table using the onChange functi ...

javascriptarraysreactjsmaterial-ui

Converting PHP date format to JavaScript date format

I'm struggling to solve this problem $datetime = new Date().toLocaleString(); // returns current date in format 10/21/2021, 14:29:43 How can I generate the desired date format using JavaScript? The output should look like this: 2021-10-21 16:30:01 ...

javascriptphp

Integrating Three Js legacy code into a Vue page component: Step-by-step guide

Is there a way to incorporate legacy Three Js code into a Vue Js page component without utilizing Vue methods or computed objects, similar to plain javascript included via an html script tag? I am working with node 10.14, Vue-cli 3, and Vue scaffold. ...

vue.jsthree.jsvuejs2vue-component

Attempting to fetch JSON information but encountering an error message stating "not a valid function."

I have been working on developing a programmer job board app and I am currently facing an issue with displaying JSON data on the main page. My goal is to eventually render the data, but for now, I just want to ensure that it appears in JSON format so that ...

javascriptnode.jspostgresqlexpresspg-promise

Can the chrome console be used to showcase the contents of objects?

When I have a line of code, and I try to output it to the console, I only see [object Object] instead of the actual object types. console.log(`%c ${args[args.length-1]} ${performance['now'](true, args[args.length-1])} [(${args.slice(0, args.leng ...

javascriptgoogle-chrome

Executing `removeChild` within a timeout during page load does not yield the expected results

I have an HTML div that is designed to contain dynamically generated children. These children are meant to be removed from the list after a specific amount of time (e.g. 1000 ms). Although some people have experienced scope issues with timeout functions, ...

javascript

The button fails to trigger the AJAX request

I've developed a form that includes a QR code generator. The QR code is generated as an SVG, and below the code is a download button that should trigger an AJAX call to my PHP script when clicked. However, the download button does not seem to initiate ...

javascriptphpjqueryajaxsymfony

I can't figure out why this form isn't triggering the JS function. I'm attempting to create an autocomplete form field that connects to a MySQL database using a PHP script and AJAX

I am encountering an issue while trying to implement the .autocomplete() function from jQuery UI with a list of usernames fetched from a MySQL database using a PHP script. Strangely, it is not functioning as expected and no errors are being displayed in th ...

javascriptphpjquerymysqlajax

Stop the execution of the setTimeout function when the webpage loads in JavaScript

In my postgres database, I have a table named students for storing student information. The structure of the table is as follows: id first_name last_name time_remind 1 pers1 pers1_name 2022-07-30 21:30 2 pers2 pers2_name 2022-07-30 20:38 Current ...

javascriptphphtmllaravel

Successful Mongoose query in Node.js, however the array remains empty even after using forEach loop. Issue with MongoDB integration

After performing a forEach inside an asynchronous method, I am trying to return an array of names. The issue is that despite the forEach working correctly, the array always ends up empty. On the website side, here is my request: function retrieveCharity( ...

javascriptarraysnode.jsmongodbforeach

What is the solution for untangling this complicated Javascript variable referencing issue?

Currently facing an issue that needs to be addressed: app.controller 'MainCtrl', ($scope, TestData) -> $scope.name = 'World' TestData.get(0).then (data)-> $scope.elem = data TestData.get(1).then (data)-> $scope ...

javascriptangularjscoffeescript

No Backend Detected for Tensorflow.js in Node

I've been attempting to develop a Discord bot that utilizes the @tensorflow-models/qna library, but I've hit a roadblock for the past 4 hours. Every time I run the script below: const qna = require('@tensorflow-models/qna'); (async () ...

javascriptnode.jstensorflownpm

Exploring the DOM in JavaScript: Searching for the final ancestor containing a specific attribute

Check out this example of HTML code: <div id="main1" data-attribute="main"> <div id="section2" data-attribute="subsection"> <div id="nested3" data-attribute="sub-subsection"> </div> </div> </div> <div id= ...

javascripthtmltypescript

When attempting to install React Native on a Mac using the "npx react-native init MyTestApp" command, the

PROBLEM I am encountering difficulties while attempting to install and execute the react native todo command - npx react-native init MyTestApp on my MacBook Pro. The specific challenges I am facing are: The detailed github issue can be found here: here ...

javascriptreactjsreact-nativeredux

What is the proper way to leverage the global 'window' object within Angular?

I'm attempting to utilize the method "window["initMapCallback"]" to invoke and monitor for "initMapCallback" in a separate file. However, I am encountering an error message in the debugging console that states Query - How can I properly implement thi ...

javascripthtmlangularcallbackasynccallback

Determining whether today is the same as a particular date with moment.js

I need to determine if today's date is the same as a specific date using moment.js. const today = moment(new Date()).format('DD/MM/YYYY') console.log(today) // "28/09/2021" const expiry = moment(new Date('2021/09/28')).format(&apos ...

javascriptmomentjs