CODEWITHSUNDEEP
javascriptthree.js
mxmtsk
mxmtsk

Reputation: 4685

Three.JS: Weird flicker/render with transparent MeshPhongMaterial

I'm having the following Mesh in my scene:

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

Because I want to fade each circle in, I made the Mesh transparent. When I move my camera there is some weird rendering and I have no clue why this happens or what I need to change. As soon as I remove transparent it'll work just fine.

enter image description here

EDIT

Here is a fiddle showing the problem. Line 139 in css is where the cylinders get created. https://jsfiddle.net/mxmtsk/tb6gqm10/35/

Upvotes: 0

Views: 788

Answers (1)

Mugen87
Mugen87

Reputation: 31026

It seems that some faces of the transparent cylinders disappear behind the plane. You can easily fix this by slightly move the cylinders towards the camera like so:

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

In this way, the cylinders do not intersect with the plane.

Updated fiddle: https://jsfiddle.net/f8m1u4rg/

Upvotes: 1

Related Questions