JSON網格上的Three.js紋理

Question

使用THREE.js，我無法將紋理加載到由JSON模型創建的網格上。 附帶的片段從models / cube.json加載一個簡單的多維數據集。

function loadRabbit()
{
    // Load the Rabbit JSON data using a THREE loadTexture

    var loader = new THREE.JSONLoader();
    loader.load( "models/cube.json", rabbitLoaded );  // Calls rabbitLoaded on completion
    //loader.load( "treehouse.json", rabbitLoaded );  // Calls rabbitLoaded on completion
}

function rabbitLoaded( geometry, materials ) {
    // Called when rabbit dataset loaded asynchronously
    console.log("rabbit Loaded !!");

    var texture = THREE.ImageUtils.loadTexture ("assets/textures/general/weave_512x512.jpg")
    var meshMaterial = new THREE.MeshBasicMaterial({color: 0x363cc9});
    meshMaterial.map = texture;


    // create the rabbit. make global
    var rm = new THREE.Mesh(geometry, meshMaterial);

    rabbitMesh = rm;
    spotLight.target = rabbitMesh;
    spotLight3.target = rabbitMesh;
    scene.add( rabbitMesh );
}

如果行
//meshMaterial.map = texture;
被注釋掉，它工作正常，場景中旋轉着一個普通的藍色立方體。 在代碼的其他地方，我創建了一個球形：

function makeMarkerSpheres(size) {
    // Creates a 'marker' sphere in red, to help locate position in 3D. Not used in production.
    var sphereGeo = new THREE.SphereGeometry(size, 32, 32);
    var texture = THREE.ImageUtils.loadTexture ("assets/textures/general/weave_512x512.jpg")

    var sphereMatl = new THREE.MeshBasicMaterial({color: 0xcd9141});
    sphereMatl.map = texture;
    var sphere1 = new THREE.Mesh(sphereGeo, sphereMatl);
    sphere1.position.set(1,1,1);
    return sphere1;
}

完美的工作原理是旋轉的立方體具有粗糙的籃子編織紋理。 但是頂部的代碼會產生此錯誤（在瀏覽器控制台日志中）：
[.WebGLRenderingContext-0x7ffd54a5e5d0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

cube.json是：

` 
{
"metadata" : {},
"scale" : 0.5,
"materials": [  {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "default",
    "vertexColors" : false
    }],
"vertices": [-3,3,-3,3,3,-3,-3,-3,-3,3,-3,-3,-3,3,3,3,3,3,-3,-3,3,3,-3,3],
"faces": [0,0,1,2,0,3,2,1,4,4,6,7,4,5,4,7,0,1,5,3,0,5,7,3,0,0,2,4,0,4,2,6,0,1,4,5,0,1,0,4,       0,6,2,7,0,2,3,7],
"morphTargets": [],
"normals": [],
"colors": [],
"uvs": [[]]
}`

我想我缺少JSON中必不可少的內容，但是我不知道是什么，任何幫助都將不勝感激。

完整的代碼在bitbucket上

Answer 1

如果要將紋理應用於json加載的模型，則json文件必須指定UV。

three.js r.71