Three.js Transparency Bug

Question

So I'm trying to render a 3D avatar on my website in which a user can place a texture on the character. I want to allow the user to make a transparent texture so they could see the model underneath. Currently, transparency makes the entire front of the torso invisible. Any tips or tricks?

Code for rendering the torso:

 onProgress, onError );
            loader.load( 'Models/<?php echo "$Item";?>', function ( object ) {
                object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        child.material.map = texture;
                                                    child.material.side = THREE.DoubleSide;
                                                    child.material.alphaTest = 0.5;
                                                    child.material.transparent = true;
                    }
                } );
                                                        object.position.y = 50;
                                                                            object.scale.set(15,15,15);
                scene.add( object );
            },

Currently what my output looks like:

Screenshot of Output

Thanks for any and all help!

Answer 1

There are a couple ways to do this.. the most flexible might be to use a canvas texture.. and then draw your base texture in there, and draw your user generated transparent texture on top, then use that canvas texture for your material. This will let you do additional stuff to the canvas if you need to.

The other way is to clone the whole object and attach the clone to the same parent but then assign the user generated material to the clone, with transparency.. but then you have to take care that the original and its clone have identical positioning and rotation/etc, or you'll get z-fighting. It's do-able but also a pain.