Tips for ensuring that a THREE.Group is always displayed in front of other objects

I am attempting to display a set of transform controls in such a way that they are constantly visible to the user. However, when I disable DepthWrite or apply the AlwaysDepth function to the transform controls, I achieve the desired result but encounter an issue where the individual parts of the transform controller overlap each other.

When DepthWrite is disabled:

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

The problem (example):

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

Preferred appearance (desired look of transform controls)

https://i.sstatic.net/6jbYM.png

Is there a way to turn off DepthWrite for a THREE.Group while keeping it active for its individual components? This would allow the group to be rendered in front of other objects, while ensuring that the individual elements of the transform controls do not render on top of each other.

javascriptthree.js

Answer №1

If you want to separate your controls from the main scene and render them separately, you can create a new scene specifically for the controls. Make sure to clear the depthBuffer between render calls to ensure the controls are displayed on top of all other objects in the scene. Here's an example pseudo-code illustrating this approach:

const controls = new THREE.Group();
const scene2 = new THREE.Scene();

scene2.add(controls);
scene2.autoClear = false;

// Render loop
update() {
  renderer.clear();

  // Render the main scene
  renderer.render(scene1, camera);

  // Clear the depthBuffer
  renderer.clearDepth();

  // Render the controls
  renderer.render(scene2, camera);
}

For more information on .clearDepth(), refer to the documentation here.

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

Three.js - spinning texture applied to spherical shape

Would it be possible to rotate a loaded texture on a sphere geometry in Three.js without rotating the object itself? I am seeking a way to rotate just the texture applied to the material. Imagine starting with a sphere like this: https://i.sstatic.net/Ol3y ...

angulartypescriptthree.js3d

What is the best way to create a function that will return a Promise within an Express Route?

I am working with a business level database module named "db_location" that utilizes the node-fetch module to retrieve data from a remote server through REST API. **db_location.js** DB LOGIC const p_conf = require('../parse_config'); const db_ ...

javascriptnode.jsexpresspromisenode-fetch

Guide on integrating a custom language parser and syntax validation into Monaco editor

I am in need of guidance on how to define a custom language in the Monaco editor. Despite my efforts, I have been unable to locate a reliable source for this documentation. My goal is to create a language with syntax similar to JavaScript, enabling users ...

javascriptjsonnode.jsmonaco-editor

Problem encountered in Python with Selenium/WebDriver: Unable to convert script into a string

I am still a beginner with selenium and I'm trying to figure out how to run a javascript function using python and then utilize the value that it returns. I've encountered an error that has me stuck. Any assistance would be greatly appreciated. H ...

javascriptpythonselenium

My jquery is malfunctioning when trying to retrieve values

I am facing an issue with accessing server-side values in my jQuery function. When I use my localhost path (NewsRecord.php) as the AJAX URL, it works fine. However, when I use the server path, it does not work. The strange thing is that the server URL pr ...

javascriptjqueryajax

Disabling collapse in Bootstrap 5 is impossible using stopPropagation() when clicking on a particular element

I'm attempting to prevent an element from collapsing/expanding when clicking a checkbox inside it. In my example on codepen, my code worked fine with Bootstrap v4, but after switching to v5, the stopPropagation function doesn't seem to work. Yo ...

javascripthtmlbootstrap-5

Moving a DIV below a fixed-positioned element

I have a website with a scrollable div. It works well, but I also need an absolutely positioned div on top of it - and it still needs to scroll smoothly without any hindrance. You can check out a basic JSFiddle demonstration here: http://jsfiddle.net/41ra ...

javascriptjqueryhtmlcssjquery-ui

The TypeScript compiler is unable to locate the name 'window'

Within my Meteor/React project, I encounter the following line of code: let gameId = window.prompt("Please input the ID of the game you would like to load."); The TypeScript compiler presents an error during transpiling: Cannot find name 'window&apo ...

javascripttypescriptmeteor

Handling errors in Angular and rxjs when encountering undefined returns in find operations

I am currently faced with the challenge of catching an error when the variable selectionId, derived from my route, is null or contains an invalid value. My code structure has a mechanism in place to handle errors when the category variable is undefined, bu ...

javascriptangularrxjsngrx

Inquiries regarding the functionality of passport.js, particularly concerning the user.id implementation

In my model, doc, or record, there is no field labeled as id. So, how is it possible that done(null, user.id) works? I do have an _id but not an id. It seems like a passport object is being added to my session with the _id of the user in the database. But ...

javascriptnode.jsmongodbexpresspassport.js

The property 1 cannot be added because the object is not extendable in React

Does anyone know what is causing the following issue? I am unable to insert a new object into a key object within my arrays of objects. For example, when I try to insert a new email at index 1 in the 'emails' array, it throws an error stating "ca ...

javascriptreactjstypescript

I encounter internal server errors when trying to upload images in React

Attempting to send a post request with an image, but encountering errors without understanding why.https://i.sstatic.net/W5uk1.png const [image, setImage] = useState([]); const handleImage = (event) => { setImage(...Array(event.target.files ...

javascripthtmlreactjsreact-nativereact-redux

What is the best way to set up a session using jQuery?

I've been troubleshooting my code and I can't seem to figure out why the jquery.session.js file isn't working. Can someone help me find a solution? $.session.set('rmng_time', remaining_seconds); alert("j session "+$.sessi ...

javascriptphpjquerysession

Material-UI Scroll Dialog that begins scrolling from the bottom

While attempting to incorporate a scrolling div with the ref tag inside Dialog Material-UI Design, I encountered an error stating Cannot read property 'scrollHeight' of undefined When running my code outside of the Dialog, it functions correctly ...

javascriptreactjsmaterial-ui

What is the best way to pause the function execution until the ajax call is finished?

I have the following code snippet: function validate(){ if (document.getElementById('<%=txtSeqNo.ClientId %>').value.trim() == "") { alert('Please enter Sequence number.'); return false; } var result = checkduplicateseq( ...

javascriptjqueryajax

Preventing selection of past dates with Material UI in ReactJS

I'm currently working on a date range picker using react material ui. The goal is to allow users to select a specific date and then disable all past dates from that selected date onward. How can I go about implementing this functionality in react mate ...

javascripthtmlreactjsmaterial-ui

Exploring every conceivable method for accessing a file from a distant server

I am striving to maximize the flexibility of my script, thus I am seeking all potential methods in PHP and JavaScript to access the content (and not the source code) of a PHP file from a remote server. I have come across CURL, fopen, and include for PHP ...

phpjavascriptfile

Bug with IE lookahead in Regular Expressions

Currently, I am struggling to define the regular expression needed for proper validation in my ASP.NET validator. Although it works fine in Firefox, the sample string is not validating correctly in IE using the following expression: 12{2}12{0-9}1{12,13} ...

javascriptregexinternet-explorervalidation

Receive an HTTP POST request within JavaScript without using Ajax in Symfony 4.1

Searching for a way to handle an event triggered by a PHP post, not through Ajax. I would like to show a spinner when the form is posted using PHP. In JavaScript, it's easy with code like this: $(document).on({ ajaxStart: function() { $('#p ...

javascriptphpajax

Changing the value of a previous TD element using Javascript

My page features a button that, when clicked, triggers a function to change the value in the previous TD element from "No" to "Yes". Here is the HTML snippet: <tr class="odd"> <td class="">13.00</td> <td class="">DDR</td> ...

javascriptjqueryhtmlhtml-table