The draw order of the A-Frame cursor is incorrect when using a transparent image

My cursor image is transparent, located as a child of the camera. 

<a-camera>
    <a-image position="0 0 -1" width="0.2" height="0.2" transparent="true" src="image.png">
</a-camera>

I'm struggling to make it visible above other transparent images like the dinosaur and seeing strange artifacts:

https://i.sstatic.net/K97aI.png

When using material="depthTest: false;", it ends up behind other transparent images:

https://i.sstatic.net/t5H5N.png

While there's plenty of information on transparency in Three.js on StackOverflow, I couldn't find anything specific to A-Frame. I tried adjusting the renderOrder with no success.

Any suggestions on how to resolve this issue?

Here is the relevant codepen link:

https://codepen.io/OpherV/pen/oBqgBa?editors=1000

javascriptthree.jstransparencyaframe

Answer №1

After some investigation, I discovered that sortObjects is intentionally set to false in A-Frame, even though it defaults to true in ThreeJS. The reason for this discrepancy is unclear as there doesn't seem to be any documentation on it.

It took me a bit of time to uncover this information, but now that I know the root cause, the solution is straightforward:

document.querySelector('a-scene').renderer.sortObjects = true;

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

Express POST request body is required

I am starting to learn nodejs and express, and while reviewing some code I found this interesting snippet. Can someone please explain what it means and how I can send a POST request to it using cURL? There are no specified data fields. app.post('/&apo ...

javascriptnode.jsexpresscurlmiddleware

Ways to include input values

In my form, there are 4 text boxes labeled as customer_phy_tot, customer_che_tot, and customer_bio_tot. I want to add up the values entered in these 3 boxes and display the sum in a 4th input box called customer_pcb_tot. customer_bio_obt.blur(function(){ ...

javascriptjquery

Determining the best times to utilize Grid items for alignment and justification versus when to avoid using them

I am wondering about the appropriate use of Grid item in order to utilize the props of the Grid container such as justify or alignItems. I initially thought that these attributes could only be applied to the Grid item within the Grid container, but my exam ...

javascriptreactjsmaterial-ui

What is an alternative way to replicate the functionality of jQuery's remove() method using only vanilla JavaScript?

Here is the line of code I have: $('.js-cover-menu-dropdown > li > ul').remove(); This code removes all ul elements from the lis within .js-cover-menu-dropdown. I am curious about how I could rewrite this using plain JavaScript. ...

javascriptjquery

Three.js tutorial: Hiding and revealing scenes with ease

Currently, I am working with the Three.js webgl library to create a scene. In my first scene, I have added a texture that acts as a button to transition to the next scene when clicked. I have implemented a function to manage this transition process. Whil ...

three.js

initiating AngularJS ng-model pipeline on blur event

My $parser function restricts the number of characters a user can enter: var maxLength = attrs['limit'] ? parseInt(attrs['limit']) : 11; function fromUser(inputText) { if (inputText) { if (inputText.length > max ...

javascriptangularjsvalidationdirectiveangularjs-ng-model

The change() function isn't being called in the FooterControl of the nested Gridview

In my gridview, there is a nested structure with a footer row for inserting data. When the parent row expands, the footer controls are generated. There are two dropdowns where the second dropdown's options depend on the selection in the first dropdown ...

javascriptasp.netgridviewwebforms

Unique Soundcloud visualization using webglonDeletegist

After going through the SoundCloud documentation, I have been trying to figure out how to create a visualizer for SoundCloud tracks. The challenge is that in order to achieve this effectively, I need access to the source waveform. I suspect that direct acc ...

javascripthtmlwebglsoundcloud

`How can I retrieve environment variables in React or inject them into a React application?`

I attempted to include the following code in the plugins section of my webpack configuration, but it resulted in an unusable build. It's worth noting that I am not using create-react-app. new webpack.DefinePlugin({ 'process.env': dotenv. ...

javascriptreactjswebpackenvironment-variables

Iterate through an array and update the innerHTML content for each value contained in the array

Looking to replace a specific word that keeps appearing on my website, I experimented with various functions and stumbled upon this method that seems to work: document.getElementsByClassName("label")[0].innerHTML = document.getElementsByClassName ...

javascripthtml

An object resulting from the combination of two separate objects

After reading a helpful solution on StackOverflow about merging properties of JavaScript objects dynamically, I learned how to utilize the spread operator in Typescript. However, one question still remains unanswered - what will be the type of the object c ...

javascripttypescriptjavascript-objects

Utilize a function with Document Write to output content onto a textarea

I am trying to implement a function that will display the result in a textarea using Javascript. Currently, the function writes the output on the body using document.write. However, I want the function to be triggered by an onclick button and display the ...

javascripthtml

Navigate to the top of a Bootstrap accordion when it is expanded

Recently, I've been working on a small blog and I want to make consecutive blog posts accessible from within an accordion. This will allow users to easily skim through post titles, select the one they find interesting, read it, and seamlessly go back ...

javascriptjqueryhtmlcssbootstrap-4

What is the reasoning behind placing CDN links at the bottom of the index file?

What is the reason for placing CDN links for AngularJS file at the end of the index page? I initially placed it at the top of the file and it worked fine. Is there a significant difference between these two placements? ...

javascriptangularjs

Steps to disable fancybox for a specific selector

I am facing an issue with unbinding fancybox associated with anchor links having a specific class. Here is an example: <a class="group">some code here</a> To bind fancybox to elements with the class 'group', I use the following code ...

javascriptjqueryfancybox

Performing tasks when a component is fully loaded in Vue.js Router

I am currently working on a project involving a single-page application built with Vue.js and its official router. For this project, I have set up a menu and a separate component (.vue file) for each section that is loaded using the router. Inside every c ...

javascriptvue.jsvue-router

Laravel and Vue collaborate for an intelligently designed autocomplete feature

Currently, I am troubleshooting an issue with a vue autocomplete feature on a laravel website. I have configured the route, controller, and blade. When I inspect the vue component and type in the input field, I can see the keywords I am typing in the cons ...

javascriptlaravelvue.jsautocomplete

Implementing $timeout within ng-init to execute a function that showcases various shapes at 2-second intervals

I'm trying to use $timeout in Angular 1 to call a function every 2 seconds using ng-init. ng-init="$timeout(sc.displaySorted(), 2000)" The sc.displaySorted() function displays 100 sorted shapes on the DOM. It works fine with ng-init, but I'm st ...

javascriptangularjstimeout

Developing a Node.js system for mapping ids to sockets and back again

Managing multiple socket connections in my application is proving to be a challenge. The app functions as an HTTP server that receives posts and forwards them to a socket. When clients establish a socket connection, they send a connect message with an ID: ...

javascriptsocketsnode.jsnetwork-programming

What are some methods for preventing JavaScript function calls from the browser console?

In the process of developing a web application using HTML and JavaScript, I'm looking for a way to prevent users from accessing functions through their browser console in order to maintain fairness and avoid cheating. The functions I want to protect a ...

javascripthtml