无法使用Three.js加载从blender导出的纹理Collada

Question

我使用的是Three.js，版本71 。我正在使用Blender，版本2.73 。

我使用Blender创建了一个带纹理的collada对象（.dae文件），现在我想将它加载到我的three.js场景中。到目前为止，我只能加载从没有纹理的blender导出的模型。

以下是我创建纹理collada对象的方法：
在搅拌机中，我只使用默认的立方体。使用右侧的设置，我向立方体添加纹理。这是我放在立方体上的纹理（注意：它是2048 X 2048，所以它的强度为2）：

这是渲染模式中立方体的图像，用于证明纹理在其上：

以下是我从Blender导出多维数据集作为collada时使用的导出设置：

以下是我用来尝试加载纹理collada的一些代码：

var loader = new THREE.ColladaLoader();
var localObject;
loader.options.convertUpAxis = true;
loader.load( './models/test_texture.dae', function ( collada ) {
  localObject = collada.scene;
  localObject.scale.x = localObject.scale.y = localObject.scale.z = 32;
  localObject.updateMatrix();
  game.scene.add(localObject);
} );

这是我得到的错误：

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2

然后我用Google搜索了该错误消息，有人说我需要计算切线。以下是我对此的尝试以及我得到的错误：

var loader = new THREE.ColladaLoader();
var localObject;
loader.options.convertUpAxis = true;
loader.load( './models/test_texture.dae', function ( collada ) {
  localObject = collada.scene;
  localObject.scale.x = localObject.scale.y = localObject.scale.z = 32;
  localObject.updateMatrix();

  for (var i = collada.scene.children.length - 1; i >= 0; i--) {
    var child = collada.scene.children[i];

    // child.children[0] will give us the THREE.Mesh of the collada
    if ( child.colladaId == "Cube" ) {

      // ATTEMPT 1: Just tried computing tangets based on answer from neoRiley here: http://stackoverflow.com/questions/21200386/webgl-gl-error-gl-invalid-operation-gldrawelements-attempt-to-access-out-of
      // child.children[0].geometry.computeTangents();

      // ATTEMPT 2: Got this suggestion from Popov here: http://stackoverflow.com/questions/15717468/three-lod-and-normalmap-shader-fail
      // child.children[0].geometry[ 0 ][ 0 ].computeTangents();
      // child.children[0].geometry[ 1 ][ 0 ].computeTangents();

      // ATTEMPT 3: Tried setting some update flags based on answer from Sayris here: http://stackoverflow.com/questions/13988615/webglrenderingcontext-error-loading-texture-maps
      // child.children[0].geometry.buffersNeedUpdate = true;
      // child.children[0].geometry.uvsNeedUpdate = true;
      // child.children[0].material.needsUpdate = true;
      // child.children[0].geometry.computeTangents();
    }
  };
  game.scene.add(localObject);
} );

ATTEMPT 1错误：

Uncaught TypeError: Cannot read property '0' of undefined
// Stack trace
three.js:9935 handleTriangle
three.js:9974 THREE.Geometry.computeTangents
myCode.js:116 (anonymous function)
ColladaLoader.js:204 parse
ColladaLoader.js:84 request.onreadystatechange

ATTEMPT 2错误：

Uncaught TypeError: Cannot read property '0' of undefined

这来自自己的代码。我并不认为THREE.Mesh的几何是二维的，但无论如何我都试过了。

ATTEMPT 3错误:(与ATTEMPT 1 ERROR相同）

Uncaught TypeError: Cannot read property '0' of undefined
// Stack trace
three.js:9935 handleTriangle
three.js:9974 THREE.Geometry.computeTangents
myCode.js:116 (anonymous function)
ColladaLoader.js:204 parse
ColladaLoader.js:84 request.onreadystatechange

Answer 1

我决定使用 JSON 加载程序，因为我无法让collada加载。我做的第一件事是将JSON导出器插件安装到Blender中。我从我的three.js下载的.zip文件中获得了插件。它进来了 three.js-r71 / utils / exporters / blender / addons ，它被称为 io_three 。您只需要复制该文件夹并将其粘贴到 Blender Foundation / Blender / 2.73 / scripts / addons 中的Blender安装目录中。

然后你必须在Blender中启用它。要做到这一点：

1. 点击文件 - ＆gt;用户首选项
2. 点击加载项
3. 在搜索字段中输入三
4. 一直到右边，点击复选框启用它
5. 点击左下角，点击保存用户设置，这样您就不需要再次执行此操作。如果您在点击文件 - >导出时看到 Three.js（.json），您就会知道它正常工作。

我按照本网站的大部分说明来帮助我创建和导出模型：http://graphic-sim.com/B_basic_export.html

以下是我用来创建和导出模型的步骤（我从网站上稍微调整了一下）

1. 启动Blender。
2. 查看属性编辑器（右侧）。
3. 按世界上下文按钮。在世界面板中，单击环境颜色，然后将其从黑色更改为中灰色。
4. 按材料上下文按钮。在漫反射面板上，将强度更改为1.0。在高光面板上执行相同操作。在着色面板中，选中 Shadeless 框。
5. 按纹理上下文按钮。在类型下拉框的顶部附近，选择图片或电影。在图片面板中，浏览到您的图片（确保图片的尺寸为2的幂）。
6. 选择 UV编辑屏幕布局（顶部帮助菜单右侧的下拉框）。
7. 在3D编辑器中使用鼠标光标，进入编辑模式（Tab键）。
8. 展开（按 U 键）。选择智能UV项目。点击确定接受默认值。
9. 在UV编辑屏幕中，使用左下角的菜单选择图像（参见屏幕截图）
10. 选择图片 - ＆gt;另存为图片。此图像需要位于您要导出的JSON文件旁边。
11. 点击文件 - ＆gt;导出 - ＆gt; Three.js（.json）。
12. 在左侧，选择其他一些导出选项（请参阅我使用过的屏幕截图，我通过试验和错误找到了这些选项）。我想我只添加了面材，材料和纹理。然后，您还可以点击保存设置以保存这些设置。
13. 将您之前保存的JSON文件和图像文件放在项目文件夹中。

14. 使用以下代码加载它：

    var object;
    var loader = new THREE.JSONLoader();          
    loader.load( "./models/test_texture.json", function(geometry, materials) {
      object = new THREE.Mesh(geometry, materials[0]);
      object.scale.set(32, 32, 32);
      game.scene.add(object);
    });