Strange flickering/visualization issue experienced with transparent MeshPhongMaterial in Three.JS

In my scene, I have a Mesh called cylinder:

const cylinder = new Mesh(
  new CylinderGeometry(2, 2, 1, 32),
  new MeshPhongMaterial({
    color: color,
    shininess: 32,
    opacity: 0,
    transparent: true,
    specular: 0xffff82,
  }),
);

I made the Mesh transparent because I want to fade each circle in. However, when I move my camera, there is some strange rendering occurring and I am unsure of the reason behind it or what changes I need to make. If I remove the transparency setting, everything works fine.

https://i.sstatic.net/l21NB.gif

EDIT

A fiddle has been created to showcase the issue. The problem arises on line 139 in the CSS where the cylinders are generated. https://jsfiddle.net/mxmtsk/tb6gqm10/35/

javascriptthree.js

Answer №1

It appears as though the transparent cylinders are partially hidden behind the plane. To rectify this issue, simply adjust the position of the cylinders to bring them closer to the camera:

cylinder.rotation.x = Math.PI / 2; 
cylinder.position.z = 0.5; // correction

By making these adjustments, you can ensure that the cylinders no longer overlap with the plane.

Check out the updated code here: https://jsfiddle.net/f8m1u4rg/

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

The cloud function in Firebase was unable to connect to the dialogflow route

I am currently working on creating a chatbot using Dialogflow integrated with OpenAI in Firebase Cloud Function. However, I am facing an issue where I cannot access the /dialogflow endpoint and keep receiving the error message: "Cannot GET /dialogflow". My ...

javascriptfirebaseexpressgoogle-cloud-functionsopenai-api

What is the solution for fixing scrolling while keeping the header fixed and ensuring that the widths of headers and cells are equal?

Is there a way to set a minimum width for headers in a table and provide a scroll option if the total width exceeds 100% of the table width? Additionally, how can we ensure that the width of the header and td elements are equal? Below is the HTML code: ht ...

javascripthtmlcsshtml-table

What is the best way to retrieve the current CSS width of a Vue component within a flexbox layout grid after it has been modified?

There's something about this Vue lifecycle that has me scratching my head. Let me simplify it as best I can. I've got a custom button component whose size is controlled by a flex grid container setup like this: <template> < ...

javascriptcssvuejs2flexboxvuetify.js

Is there a way to eliminate duplicate pages from an EJS template pagination system?

I stumbled upon this helpful article that guides in implementing a pagination feature for my MEN stack app. The article provides a comprehensive overview from frontend to backend. While everything is working smoothly, I'm looking to make some adjustme ...

javascriptnode.jsexpresspaginationejs

Pause the jquery script when a key is pressed

Currently, I have a script that loads a php file within a div and automatically refreshes every 5 seconds. Check out the code below: $("#load_timeout").load("time_out.php"); var refreshId = setInterval(function() { $("#load_timeout").load('time_o ...

javascriptphpjqueryajax

What is the process for making an Ajax request in Rails?

I'm attempting to send a variable through jQuery using the POST method, saving it in a controller, and then utilizing that same variable in Rails HTML to query a table. It seems like the variable isn't being passed to the controller. jQuery: v ...

javascriptjqueryruby-on-railsrubyajax

Creating a Visual Presentation with Background Image Transition in HTML, CSS, and JavaScript

Seeking assistance in setting up a basic background image slideshow on my website. I have been unable to locate a suitable tutorial online, so I'm reaching out here for guidance. HTML: <body> <h3>Welcome!</h1> <p>Lorem i ...

javascripthtmlcssbackground-imageslideshow

How can I utilize JavaScript to generate a dynamic value in a URL and then submit it through a form?

One of my clients has requested the ability to send out unique URLs to their customers in order to track which links are being utilized. Despite my suggestion to use Google Analytics for this purpose, they have specifically asked to avoid it. Their reques ...

javascript

Grouping and retrieving values from an array of JavaScript objects

I am looking to implement a groupBy function on the object array below based on the deptId. I want to then render this data on a web page using AngularJS as shown: Sample Object Array: var arr = [ {deptId: '12345', deptName: 'Marketin ...

javascriptangularjshtmllodash

There are no HTTP methods being exported in this specific file. Remember to export a named export for each individual HTTP method

Currently, I am working on a React.js/Next.js project that incorporates Google reCAPTCHA. The frontend appears to be functioning properly as I have implemented print statements throughout the code. However, I am encountering an error in the backend display ...

javascriptreactjstypescriptnext.js

Solving the issue of "localstorage is not defined" in NextJS Redux

Currently, I am working on implementing local storage in Next.js with Redux. In Next.js, components are initially rendered server-side, which means that localStorage or window objects are not available until the rendering occurs in a browser. This issue ...

javascriptreactjsreduxnext.jsredux-toolkit

exploring the similarities between arrays containing nested objects

Can you assist me, please? I need help comparing and calculating the percentage difference between values and returning an array. I have to compare arrays, access objects with names and values, and calculate the percentage. For instance, if the first ite ...

javascriptcomparejavascript-objects

Is it possible to have the front-facing photo in expo-camera stay mirrored?

Currently, I am utilizing the expo-camera library to capture a selfie image. Despite the preview being mirrored, the final saved image reverts to its normal orientation. Is there any way to avoid this behavior so that the image remains mirrored? Alternativ ...

javascriptreactjsreact-nativeexpoexpo-camera

Inject the code snippet from CodePen into a WordPress webpage

I have a WordPress page where I want to integrate the HTML, CSS and JS code from my Codepen project. The styling appears to be working correctly, but the JavaScript is not functioning as expected. You can view the page here: Could someone assist me in pr ...

javascripthtmlcsswordpresspost

Choosing an element in JQuery based on the value of its style property

I have three divs with the same class but different styles. I need to select only the third one using JQuery. <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-div ...

javascriptjquerycss

Error: The function stripHtml cannot be found

Currently, I am developing a blog website using Next Js. I encountered an issue while creating a rich text-editor API for the blog. When attempting to utilize string-strip-html, an error message was displayed as follows: C:\Users\alami\OneDr ...

javascriptnode.jsreactjsnext.js

Toggle Vue transitions on and off with a boolean parameter

Is there a way to dynamically disable a transition animation in Vue based on a boolean value? Currently, the animation is enabled with the following code: <transition name="fadeUp"> <div v-if="elIsVisible"> <p>Foo Bar</p> ...

javascriptvue.js

What are the best practices for effectively managing jQuery UI sliders?

I am currently developing a web application that involves updating jQuery UI sliders using JavaScript. While I have managed to resolve most of the issues related to updating the slider after initialization, there is one particular issue that remains unreso ...

javascriptjqueryjquery-uijquery-ui-slider

Using TypeScript to determine the week number - the value on the right side of the math operation must be of data type 'any'

I've spent a lot of time searching for code to help me calculate the week number in my Angular app according to ISO standards. It's been challenging to find JavaScript-specific code, but I believe I may have found something - however, I encounter ...

javascripttypescript

What is the process for extracting data from latitude and longitude in order to generate a marker on Google Maps using a script

I have an HTML input text and want to pass coordinates to create a marker on Google maps. Check out the code here: jsfiddle.net/#&togetherjs=r3M9Kp7ff7 What is the best way to transfer this data from HTML to JavaScript? <label for="latitude">L ...

javascripthtml