Three.js Canvas 渲染器，带有 Blender JSON 文件的 Objectloader，对象重叠的透明度？

Question

我正在使用 Three.JS 来渲染导出为场景的 Blender 对象，因此它使用的是 ObjectLoader，而不是 Json Loader。我也在使用 CanvasRendering 引擎。当对象重叠时会出现此问题；它正在对材质进行半透明效果。

我使用哪种类型的搅拌机出口并不重要；我已经选择并导出了其他 Blender 文件，无论设置如何，它们都会产生这种效果。

以下是我用来放置对象和材质的代码。

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 );
                }   
            );

我使用过从 Lambert 到 Phong 的材质类型，但我仍然遇到这种重叠透明度问题。我错过了什么？谢谢！

编辑：在 cmets 之后，我进行了请求的更改。现在使用 WebGL 渲染器代替 Canvas。这就是我现在所拥有的，模型现在根本没有出现，但我的控制台中没有错误。

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 );
                }   
            );

Answer 1

您的模型在您的视口之外，这就是您看不到它的原因。在https://codepen.io/anon/pen/qPmyPz?editors=0010 中加载你的模型，你可以看到它很好。现在注释第 80-82 行（这是默认行为）并重新加载您的模型。你再也看不到它了。

这些行将controls 转为您可以看到模型：

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