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纹理

回答

相关问题