Hi there. So i have a model that has a transparent part, but the transparency is not working right. The transparency somehow only works with special camera position.
Here are the images:
Any tips to make the transparency work no matter which camera position.
What can cause it ?
To me this looks like your model has some issues with face orientation not being consistent. I’d suggest to temporarily add a NormalsHelper() to find out.
import { VertexNormalsHelper } from "../examples/jsm/helpers/VertexNormalsHelper.js";
...
scene.add(boxMesh);
let helper = new VertexNormalsHelper( boxMesh, 1.0, 0xff0000, 1 );
boxMesh.add( helper );
Thank you ! I will try that…
It may also help if you could share the full settings on the object material, and of the ground material behind it.
Based on what you said by only works at certain camera angles, it might be a transparency sorting issue.
Any chance the position of the box and ground are the same? Try move the box slightly up to see if it helps.
When i put the box up the transparency not working at all…my box is at
theModel.position.y = -1
by default. Also the ground is by -1. Does it matter ?
EDIT:
Ok so when i move the ground up you got “MORE” transparency … so it has something to do with the ground ?!
// ground
const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xeeeeee, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
mesh.position.y = -1;
scene.add( mesh );
const grid = new THREE.GridHelper( 200, 200, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
grid.position.y = -1;
scene.add( grid );
I might be wrong but when you draw transparent objects, threejs sorts the objects for their drawing order from further to closer to camera based on their distance between their position and the camera’s position. If the position of the box and the ground are the same then it makes an ambiguity for threejs to determine which object should be draw first so that they could be properly alpha blended. See the link I shared for the details.
If the ground is always drawn underneeth the every objects, I think one easiest solution that you can try is to use custom rendering order.
WebGLRenderer#sortObject
Object3D#renderOrder
You can try something like this:
renderer.sortObjects = false
ground.renderOrder = 0
otherObjects.renderOrder = 1
++ Oh wait, is the grid transparent object? Would you mind giving me more details about what’s your desired output?
Hi there ! Thank you for you answer.
I can provide more information tomorrow.
i am sorry but i am off work right now!
Feierabend - end of work
Be back tomorrow. Hope you still want to help me later 
Ok i am back at work
Right now i am playing around with the ground + grid and noticed that when i remove grid.material.transparent = true
the transparency of the box also not “working” at all.
Do you guys have some code for a real good floor with grid? I am not sure if i am suing the floor mesh the right way.
Please describe in detail, which effect you’re trying to achieve.
To interpret the descriptions you’ve given so far:
Your “ground” comprises two objects:
PlaneGeometry() which receives shadowsGridHelper() at the same(!) y-coordinate, which you assign some transparency.It puzzles me why one would want to make a transparent grid in the first place, because the space between the grid lines is void and has optimum transparency by design already. If you assign the grid lines some transparency to overcome z-fighting with the plane at the same y-coordinate, you’d probably be better off by raising the grid slightly above the ground plane and forget about making the grid transparent.
In your last post you also mention that you want the box to also be transparent. In order ro receive better answers please don’t keep us guessing about your intentions.
At the start of the project i had a simple floor with shadows. Than i tried to add a grid and changed the ground/floor to this.
// Ground
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xeeeeee, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
ground.position.y = -1;
scene.add( ground );
const grid = new THREE.GridHelper( 1000, 1000, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = false;
grid.position.y = -1;
scene.add( grid );
Than i realised that some of the models change the transparency depending on the angle you look on the model. So i tried identify the problem. In my opinion the transparency bug has something to do with the ground / grid. So i hope than someone can provide a good ground + grid solution to test. Because my ground + grid is far from good.
P.S. When i change the transparency of the grid i get this results:
grid.material.transparent = true;
grid.material.transparent = false;
So i someone has a better solution for the ground / grid please share.
See (and understand) the hint I gave you about z-fighting and how to avoid this.
If you want something more pretty, you can specify a color for the grid. Personally I like a dark midnight blue for this:
const grid = new THREE.GridHelper( 1000, 1000, 0x000088, 0x000088 );
^^ ^^
The plane itself should somehow complement the grid’s hue, but shouldn’t be too dark if you want to keep visible shadows.
Actually its just a gray fog one the scene:
scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
Can someone please share a glb model that has real transparency like glass or water. I am not sure the model i am using is good for testing, because even the Windows 3D-Viewer doesn’t show the transparency right. So it maybe ONE of the problems.
OK it seems that the first model i used was somehow not really transparent. Something was wrong with that model. I tried now a few other models and 90% of them worked perfect. So its more like a model problem.
