JSON網格上的Three.js紋理

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

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

來源

2015-08-26 Doha Simon

如果你想紋理應用到JSON加載模型，您的JSON文件必須指定的UV。

three.js r.71

來源

2015-08-26 15:32:34 WestLangley

JSON網格上的Three.js紋理

回答

相關問題