0

Hi all,

I'm a chemistry teacher and I would like to use the JSARToolkit demo written by Ilmari Heikkinen in html5 rocks http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/.

I'm a trying to use the threejs demo http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/AR_mediaStream_three.html with the latest threejs revision (n°58), adding a molecule mesh exported via blender with the three.js exporter(ver2.6).

Here's my code used to import the mesh.

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

And here is the 3d model eau.js I'm using:https://gist.github.com/BenjaminABEL/5899604/raw/3c73e7561b82493d982bdb54be81180e4f331a48/eau.js

The problem is that the molecule appears transparent-like and black.

Although this model works right when I import it like in a simpler example like this one:https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Model.html.

4

2 回答 2

1

我有同样的问题。对此的快速破解是设置material.side为THREE.DoubleSideor THREE.BackSide。

它与 JSARToolKit 和 Three.js 之间的不同坐标系有关。JSARToolKit 是带有-Z-up 的左手坐标系，而 Three.js 是带有 Y-up 的右手坐标系。如果您在这些系统之间进行转换，它将显得正确。我写的一些信息可能会有所帮助：http ://cg.skeeology.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 实例，再一行代码更新它。您可能想尝试一下，或者至少在决定是否要使用它之前先看看这些功能。

于 2013-09-06T20:08:02.337 回答
0

总而言之，addModelToscene函数是（感谢 skeeology）：

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

它就像一个魅力。

现场的阿司匹林

于 2013-09-17T18:06:34.083 回答