In the picture is a tree model. After loading the approach scene, the original transparent cube is shown now. How to solve the problem?
Can you show the code you are using for the tree material and texture?
@gaojunxiao It looks like you are not discarding the black pixel. Assuming that your texture is texture2D you should define a threshold, and then, in your fragment shader, you should discard the black pixels, there should be something like this:
const float threshold = 0.5;
void main() {
vec4 textureColor = texture2D(texture, vec2(vUv.s, vUv.t));
if (textureColor[0] < threshold && textureColor[1] < threshold && textureColor[2] < threshold) {
discard;
} else {
//all your color calculation..
gl_FragColor = materialAmbientColor + textureColor * lightColor * lightPower * cosTheta / (dist * dist);
}
}
I’ve did something similar in the past for this demo http://davideprati.com/2016/10/02/countless-blades-of-waving-grass-in-threejs.html, maybe it is helpful for you.
There is no need to write a custom shader. You can instead use an an alphamap or an alpha channel on your material and then set .alphaTest=0.5 (or anything greater then zero) to discard the alpha pixels. This will work with any of the three.js built-in shaders.
Thank you for your reply. I didn’t do it the way you did. My tree model is texture
Here is the code:
var mtlLoader = new THREE.MTLLoader( manager );
mtlLoader.setTexturePath( ‘obj/building/obj/’ );
mtlLoader.setPath( ‘obj/building/obj/’ );
mtlLoader.load( 'TY.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader( manager );
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/building/obj/' );
objLoader.load( 'TY.obj', function ( object ) {
object.castShadow = true;
object.receiveShadow = true;
object.scale.set( 1.0, 1.0, 1.0 );
object.position.y = -200;
var children = object.children;
for ( var i = 0 ; i < children.length; i++ ) {
children[i].castShadow = true;
var materials = children[0].material.materials;
for ( var j = 0; j < materials.length; j ++ ) {
materials[j].alphaTest = 0.3;
}
}
three.scene.add( object );
potree.pointcloud = object;
}, onProgress, onError );
});
The material of the model is MeshPhongMaterial, hoping to get your help
Your material must have an alphaMap texture or an alpha channel in it’s diffuse map texture for this to work.
I’m not familiar with the MTL format, or the OBJ loader and it’s unclear from your snippet if the material actually has alpha or not.
if you can add an alphaMap texture or alpha channel to your diffuse texture in your material it should work with your code.
edit: This reddit post describes a very similar issue (and fix) to your issue.
Can you try setting material.transparent = true?
Also, is your texture file a transparent .PNG?
Yes, it’s a transparent png.
I realized the basic shape of the tree through the entire code, but what should I do when I rotate the model with a broken surface problem?
This looks like a completely different issue. Please create a new thread. Include your code, models, and if possible a working example and we can discuss it there.
Please don’t create a new thread without these details as it will be deleted.
1 Like
Hello, I now have another rendering problem about transparent material
Below code is shaderMaterial material:
hope to get your help, thanks
I may not describe it clearly enough, adding here that the transparent glass model can penetrate other opaque models, as shown in the picture