Search code examples
canvasthree.jstextures

Three.js Canvas renderer, Objectloader with a Blender JSON file, transparency on object overlap?

I'm using Three.JS to render a Blender Object exported as a scene, so it is using the ObjectLoader, not the Json Loader. I am also using the CanvasRendering engine. The issue occurs when there is an overlap on the object; it is doing a semi-transparent effect on the material.

weird overlap render

It doesn't matter what sort of blender export I'm using; I've picked and exported other Blender files and they all do this effect, no matter the settings.

enter image description here

The following is the code I'm using to place the object and the material.

var loader = new THREE.ObjectLoader();
            loader.load("../js/lights.json", function(object) {

                   var material = new THREE.MeshToonMaterial( { color: 0x3f3f3f, alphaTest: 0.5 } );
                   object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        child.material = material;
                        child.drawMode = THREE.TrianglesDrawMode;
                    };  
                   });
                   object.scale.set(3, 3, 3);
                   object.position.x = 1;
                   object.position.y = 1;
                   object.position.z = 1;
                   object.rotation.set( 25, 25, 25 );
                   scene.add( object );
                }   
            );

I've played with the material type, from Lambert to Phong, and I'm still getting this overlap transparency issue. What is it I'm missing? Thanks!

EDIT: After the comments, I've made the changes requested. The WebGL Renderer is now being used instead of Canvas. This is now what I have, the model isn't showing up at all now, but I have no errors in my console.

var loader = new THREE.ObjectLoader();
            loader.load("../js/lights.json", function(object) {

                   var material = new THREE.MeshBasicMaterial( { color: 0x333333 } );
                   object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        child.material = material;
                        child.geometry.computeFaceNormals();
                        child.material.overdraw = 0.5
                    };  
                   });
                   object.scale.set(3, 3, 3);
                   object.position.x = 1;
                   object.position.y = 1;
                   object.position.z = 1;
                   object.rotation.set( 25, 25, 25 );
                   scene.add( object );
                }   
            );
Solution

  • Your model is outside your viewport, thats why you dont see it. Load your model in https://codepen.io/anon/pen/qPmyPz?editors=0010 and you can see it fine. Now comment the lines 80-82 (which is the default behavior) and reload your model. You are not able to see it anymore.

    These lines turn the controls so you can see the model:

    var bb = new THREE.Box3()
bb.setFromObject(scene);
bb.center(controls.target);