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

Question

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

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

以下是我创建带纹理的 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

然后我用谷歌搜索了那个错误信息，有人说我需要计算切线。这是我的尝试以及我得到的错误：

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);
} );

尝试 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

尝试 2 错误：

Uncaught TypeError: Cannot read property '0' of undefined

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

尝试 3 错误：（与尝试 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

Answer 1

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

然后您必须在 Blender 中启用它。为此：

1. 点击文件->用户首选项...
2. 点击插件
3. 在搜索字段中输入三个
4. 一直向右，点击复选框启用
5. 点击左下角的保存用户设置，这样您就无需再次执行此操作了。如果您在单击 File->Export 时看到 Three.js (.json)，您就会知道它正在工作。

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

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

1. 启动 Blender。
2. 查看属性编辑器（右侧）。
3. 按世界上下文按钮。在 World 面板中点击 Ambient Color 并将其从黑色更改为中灰色。
4. 按材料上下文按钮。在 Diffuse 面板上，将 Intensity 更改为 1.0。在 Specular 面板上执行相同的操作。在 Shading 面板中，勾选 Shadeless 框。
5. 按纹理上下文按钮。在Type下拉框顶部附近，选择Image or Movie。在图片面板中，浏览到您的图片（确保图片的尺寸是 2 的幂）。
6. 选择 UV 编辑 屏幕布局（顶部帮助菜单右侧的下拉框）。
7. 在 3D 编辑器中使用鼠标光标，进入编辑模式（Tab 键）。
8. 展开（按 U 键）。选择智能 UV 项目。点击确定接受默认值。
9. 在 UV 编辑屏幕中，使用左下角的菜单选择您的图像（见屏幕截图）
10. 选择图像->另存为图像。此图片需要位于您要导出的 JSON 文件旁边。
11. 点击文件->导出->Three.js (.json)。
12. 在左侧，选择更多导出选项（请参阅我使用的截图，这是我通过反复试验找到的）。我想我只添加了 Face Materials、Materials 和 Textures。然后您也可以点击保存设置来保存这些设置。
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);
    });