0

I am trying to load a single texture containing transparent elements to a collada model. Initially, I set:

this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

However, this gave the background color of the html page.

enter image description here

Then, going through other SO links, I found and tried these:

material.transparent = true;

material.depthWrite = false;

material.depthTest = false;

material.alphaTest = 0.5;

But the result remained the same (white instead of transparent). I finally found a solution that suggested editing the dae file and adding a line below every occurrence of <transparent></transparent> block:

<transparency><float>0.100000</float></transparency>

After this, the white disappeared and the transparent texture was rendered, but only partially.enter image description here

This effect is more pronounced when viewing it from the other side:enter image description here

Link to view this effect live is here

I've tried the following SO links and they do not seem to be working:

Three.js / WebGL - transparent planes hiding other planes behind them

Managing z-buffering with transparent textures in Three.js

Three.js png texture - alpha renders as white instead as transparent

Displaying background colour through transparent PNG on material?

three.js transparent texture and shader material

gman
  • 100,619
  • 31
  • 269
  • 393
eklavya
  • 75
  • 1
  • 5
  • Just to clarify, this is all within the same mesh, correct? From what I can tell in your scene, the fork and wheel are all one geometry object. My guess is that WebGL is unable to handle calculating the z values between the faces which compose the left-side spokes vs. the faces that compose the right-side spokes. I realize that you're using Collada, but if you can split the shapes for the spokes away from the main model, and each other, WebGL may be able to calculate their depths correctly, and thereby apply the effect you're seeking. – TheJim01 Jun 14 '17 at 16:11
  • @TheJim01 This is all within the same mesh. Splitting the shape is difficult, as the collada model is not my creation. Rather, I've purchased the rights to use this model from its creator. I will not be able to do this myself, but I'll request the creator if he can help me out with this. – eklavya Jun 14 '17 at 16:35

0 Answers0