Three.js加载导出的Blender模型。

Question

我在Blender中制作了一个简单的3D模型，并将其导出为.obj文件。现在我正在使用three.js加载它，我希望拥有名称中包含“clickable”字符串的对象在单击时沿Y轴移动。

您可以在此处查看它：http://three.parkz.cz/shop.html 问题是从对象名称（我在Blender中设置的名称）解析的信息与正确的对象不对应。

加载和解析：

var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function(event) {
  object = event.content;
  object.name = 'CustomObjects';
  for(var i = 0; i < object.children.length; i++) {      

    //console.log(object.children[i]);
    var properties = object.children[i].name.split('_');
    if(properties[1] == 'clickable') {
      object.children[i].clickable = true; 
    } else object.children[i].clickable = false;

  }
  object.rotation.x = 0.5;
  object.rotation.y = 0.5;                                  
  scene.add(object);
});
loader.load('shop.obj', 'shop.mtl');

例如，中心的两个立方体（称为“005_kiosek”和“010_kiosek2”）不应该是可点击的，但它们却是可点击的！您可以打开控制台，在单击它后，您可以看到它们的名称错误地命名为“004_clickable”和“009_clickable”！

这是我的blender文件：http://three.parkz.cz/shop.blend 这是javascript方面的问题还是blender导出有误？

谢谢您的帮助！

马丁

P.S：有人知道为什么那些简单的网格（绿色和蓝色）渲染得不好吗？

- johny long

Answer 1

由于当前实现下，obj加载器只接受三角形作为面，因此绿色和蓝色网格无法正确渲染。由于这些网格使用的是多边形，因此它们无法正确渲染。

至于名称，我会尝试验证在blender文件中放置的内容是否正确。因此，当您加载模型时，只需打印名称和可点击属性，以查看是否一切正常，而不是将其视为理所当然。

- gaitat

---

嗨，Gaitat，谢谢您的回复！我会尝试验证blender是否正确导出了所有内容。您能否请教如何解决渲染问题？我应该在blender中以不同方式建模对象吗？ - johny long

是的，当你从Blender导出时，应该有一个选项来三角化模型的面。 - gaitat

渲染问题已经解决，现在要尝试可点击的功能。谢谢你！你真的帮了我很大的忙。 - johny long

好的，我已经添加了 objects.name = 'CustomObjects'; 当我查看这个对象的子项时：第一个没有任何子项（网格），而最后一个有两个子项（网格）。如果我在Blender中单独制作它，为什么three.js会以这种方式加载它？ - johny long

一个建议，让你可以继续你的工作，就是保存单独的 obj 文件（例如，一个模型用于球体，一个用于圆锥等）。 - gaitat