使用JSARToolkit导入模型时呈现错误

Question

嗨，

我是一名化学老师，我想使用JSARToolkit演示，由Ilmari在html5 rocks webrtc/中编写。

我尝试使用带有最新threejs修订版(n°58)的3ejs演示threejs，添加一个通过搅拌器与three.js出口商导出的分子网格(ver2.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;
}

再确认一下你是否做过这件事。

更新:我已经发布了http://cg.skeelogy.com/skarfjs/，一个JavaScript增强现实库的Three.js框架。我已经将JSARToolKit和js集成到了框架中。其中一个特点是，它将为您处理上面提到的坐标系统的差异，所以您不必进行双面攻击。集成很容易，只是创建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);
    }   

就像一种魅力。

​

​