使用JSARToolkit在threejs中导入模型时渲染错误

Question

大家好，

我是化学老师，我想使用Ilmari Heikkinen在html5 rocks http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/中编写的JSARToolkit演示。

我正在尝试将threejs demo http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/AR_mediaStream_three.html与最新的threejs版本（n°58）一起使用，添加通过blender导出的分子网格与three.js导出器（ver2） 0.6）。

这是我用于导入网格的代码。

function addModelToScene( geometry, materials )
    {
var material = new THREE.MeshFaceMaterial( materials );
        mesh = new THREE.Mesh( geometry, material );
        mesh.rotation.x = 2*Math.PI/2;
        mesh.rotation.y = 2*Math.PI/2;
        mesh.rotation.z = 2*Math.PI/2;
        mesh.position.x = 0;
        mesh.position.y =  0;
        mesh.position.z = -50;
        mesh.scale.set(30, 30, 30);
        m.model.matrixAutoUpdate=false;
        m.model.add(mesh);
        scene.add(m.model);
    }   

for(var i in markers){var m=markers[i];
    if(!m.model){m.model=new THREE.Object3D();
        var jsonLoader = new THREE.JSONLoader();
    jsonLoader.load( "models/eau.js", addModelToScene );
}
copyMatrix(m.transform,tmp);
m.model.matrix.setFromArray(tmp);
m.model.matrixWorldNeedsUpdate=true;
}

以下是我正在使用的3D模型eau.js：https://gist.github.com/BenjaminABEL/5899604/raw/3c73e7561b82493d982bdb54be81180e4f331a48/eau.js

问题是该分子看起来像透明和黑色。

虽然这个模型在我导入时正常工作，就像在这个简单的示例中一样：https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Model.html。

Answer 1

我遇到了同样的问题。快速解决此问题的方法是将material.side设置为THREE.DoubleSide或THREE.BackSide。

它与JSARToolKit和Three.js之间的不同坐标系有关。 JSARToolKit是一个带有-Z-up的左手坐标系，而Three.js是带有Y-up的右手坐标系。如果您在这些系统之间进行转换，它将显示正确。我写的一些信息可能会有所帮助：http://cg.skeelogy.com/google-summer-of-code-2013-week-2/#coordinates

编辑：有关MeshFaceMaterial的黑客攻击的更多信息：

如果您的材质是MeshFaceMaterial，则需要遍历其.materials数组以获取所有子材质，然后将其设置为双面。

var i, len;
for (i = 0, len = theMeshFaceMaterial.materials.length; i < len; i++) {
    theMeshFaceMaterial.materials[i].side = THREE.DoubleSide;
}

只是仔细检查你是否已经这样做了。

更新：我发布了skarf.js，一个用于JavaScript增强现实库的Three.js框架。我已将JSARToolKit和js-aruco集成到框架中。其中一个特点是它将为您处理上述坐标系差异，因此您不必进行双面黑客攻击。集成很简单，只需要一行代码来创建Skarf实例，另一行代码来更新它。在决定是否要使用它之前，您可能想要试一试，或者至少看一下这些功能。

Answer 2

总而言之，addModelToscene函数是（感谢抒情诗）：

    function addModelToScene( geometry, materials )
    {
        var theMeshFaceMaterial = new THREE.MeshFaceMaterial( materials );
        var i, len;
        for (i = 0, len = theMeshFaceMaterial.materials.length; i < len; i++) {
            theMeshFaceMaterial.materials[i].side = THREE.DoubleSide;
        }
        mesh = new THREE.Mesh( geometry, theMeshFaceMaterial );
        mesh.position.z = -50;
        mesh.scale.set(30, 30, 30);
        marker.object3d.add(mesh);
    }   

它就像一个魅力。