2

拡張現実を使用したThree.jsプロジェクトがあり、テクスチャを使用してモデルをロードしようとしています。どういうわけか私のモデルは黒で、テクスチャがありません。ブレンダーのチェックボックスをオンにして画像をエクスポートしました。また、t-rex（使用しているモデル）の.jsファイルにテクスチャがリストされているのに、アプリケーションがそれをロードしないことがわかります。

編集（追加 されたコード）モデルをロードするために使用するコード：

new THREE.JSONLoader().load("models/trex.json", function(geometry) {
                var material = new THREE.MeshFaceMaterial();

                var dino = new THREE.Mesh(geometry, material);

                dino.position.z = -50;
                dino.scale.x = dino.scale.y = dino.scale.z = 2;
                dino.updateMatrix();
                dino.overdraw = true;
                marker.object3d.add(dino);
            });

マーカーを使用しているため、これをマーカーオブジェクトに追加します。マーカーを表示する場合は、マーカー上（またはその真上）にトレックスを描画します。

trexモデルはこれと同じですが、blenderで開き、最新バージョンのblenderをthree.jsエクスポーターに使用しました：http：//alteredqualia.com/three/examples/webgl_trex.html

また、私のtrex.jsonファイルは次のようになります。

{

    "metadata" :
    {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.63 Exporter",
        "vertices"      : 23273,
        "faces"         : 23268,
        "normals"       : 20842,
        "colors"        : 0,
        "uvs"           : [11497],
        "materials"     : 1,
        "morphTargets"  : 0,
        "bones"         : 0
    },

    "scale" : 0.0500,

    "materials": [  {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "Material.001",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.2933282256126404, 0.2933282256126404, 0.2933282256126404],
    "colorDiffuse" : [0.2933282256126404, 0.2933282256126404, 0.2933282256126404],
    "colorSpecular" : [0.13438941538333893, 0.13438941538333893, 0.13438941538333893],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "trex_image_copy.png",
    "mapNormal" : "trex_image_bump.png",
    "mapNormalFactor" : 12.0,
    "mapSpecular" : "trex_image_spec.png",
    "shading" : "Phong",
    "specularCoef" : 511,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
    },

    {
    "DbgColor" : 15597568,
    "DbgIndex" : 1,
    "DbgName" : "Material",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorDiffuse" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "trex_image_copy.png",
    "mapLight" : "trex_image_eye.png",
    "mapLightWrap" : ["repeat", "repeat"],
    "shading" : "Lambert",
    "specularCoef" : 1,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
    },

    {
    "DbgColor" : 60928,
    "DbgIndex" : 2,
    "DbgName" : "Material",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorDiffuse" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "trex_image_copy.png",
    "mapLight" : "trex_image_eye.png",
    "mapLightWrap" : ["repeat", "repeat"],
    "shading" : "Lambert",
    "specularCoef" : 1,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
    }],

    "vertices":

ボックスを描画してからテクスチャを追加しようとしましたが、機能しますが、json形式からファイルをロードしてからテクスチャを表示しても機能しません。

どうもありがとう！

4

3 に答える 3

5

あなたが探しているのは、jsonからテクスチャ/マテリアルをロードすることだと思います。JSONLoaderは実際にそれを処理します。対応するマテリアルは、ローダーコールバックの2番目のパラメーターとして返されます。もちろん、これはjsonがマテリアルデータを保持している場合にのみ機能します（あなたの場合は保持しています）。

new THREE.JSONLoader().load("models/trex.json", function(geometry, materials) {
     var material = new THREE.MeshFaceMaterial(materials);
     var dino = new THREE.Mesh(geometry, material);

     dino.position.z = -50;
     dino.scale.x = dino.scale.y = dino.scale.z = 2;
     dino.updateMatrix();
     dino.overdraw = true;
     marker.object3d.add(dino);
 });
于 2013-02-17T18:17:47.153 に答える
2

このソリューションは、次のリリースでのみ機能します。r58〜r69
詳細については、コメントセクションとTHREE.js移行ページを確認してください。

私はあなたが試みているようにテクスチャをエクスポートするのにそれほど幸運がありませんでした。JSONエクスポーターを使用して、ジオメトリとUVマッピングをエクスポートし、テクスチャの読み込みを自分で処理してみます。誰かがあなたが使用するためのよりエレガントな解決策を持っていない限り。テクスチャをロードしてから、コールバックでマテリアルを作成し、ローダーを使用してJSONからジオメトリを取得することができました。次に、ローダーのコールバックで、前に作成したジオメトリとマテリアルの両方を使用してメッシュを作成します。次にいくつかのサンプルコードを示します。

var tex, mat, mesh;

$(window).load(function () {
    /** Load mesh from JSON, position, scale, add texture and add to scene */
    tex = THREE.ImageUtils.loadTexture('../img/texture.jpg', new THREE.UVMapping(), function () {
            mat = new THREE.MeshPhongMaterial({ map: tex });
            loader.load('model.js', function (geo) {
                mesh = new THREE.Mesh(geo, mat);
                mesh.position.set(0, 0, 0);
                mesh.scale.set(20, 20, 20);
                // etc, etc
                scene.add(mesh);
            });
        });
});
于 2012-10-12T21:19:30.807 に答える
-1

テクスチャにファイルパーミッションを与えようとしましたか？...このファイルはblenderによって生成されているので、そのファイルにパーミッションを与える必要があります。

于 2015-07-03T18:39:31.853 に答える