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

JSON网格上的Three.js纹理

1 个答案: