ThreeJs 和 Blender（使用 colladaLoader）：第一次接触答案

【问题标题】：ThreeJs and Blender (using colladaLoader): first contactThreeJs 和 Blender（使用 colladaLoader）：第一次接触
【发布时间】：2014-06-07 03:26:42
【问题描述】：

如何在 ThreeJs 中从 Blender（使用 colladaLoader -->.dae）渲染导出的场景（包含许多对象，每个对象具有不同的颜色和不同的属性，例如围绕场景中的轴旋转）？

【问题讨论】：

你能把这篇文章分成问答部分吗？并将答案作为答案发布。
这些是我的观察，应该对那些开始学习 ThreeJs 和 Blender 的人有用；不知道实际上如何将其拆分为问题
我知道如何用 stackowerflow 来做（但需要 15 个代表来做）；我的意思是，我不知道如何将整个文本拆分为问题，如何在逻辑上对其进行细分，以便阅读它的人能够理解：)
好的，如果你这么认为，我会重新编辑问题并将大部分内容作为答案发布，但无论如何我必须等待 8 小时，直到获得 15 名声望 :)跨度>
现在您拥有所需的声誉。 :-) 提出一个简短、具体的问题，然后发布一个详细、具体的答案。

标签： three.js blender

【解决方案1】：

所以，第一步是学习如何在 threeJs 中创建场景并使用 Blender 学习一些功能。准备好后，创建您的第一个模型，并在导出之前记住这一点：

你需要一个有顶点的对象，所以如果你只是用Blender创建一个文本，你必须把它转换成一个网格，否则threeJs不会渲染它
一定要选择 Blender 渲染选项而不是 Cycles，否则你导出的 .dae 将不会在 threeJs 中呈现
应用纹理时，仅使用颜色和基本材质（basic、phong 和 lambert） - 使用 colladaLoader 将无法使用其他材质
查看对象是否会在threeJs中用颜色渲染 colladaLoader 只需在 Blender 中以对象模式查看对象（实心） - 如果它是灰色的并且不是您选择的颜色，它将以同样的方式呈现在threeJs中
如果您将“solidify”修改器应用于对象，然后在threeJs 上将其设置为透明，它将被渲染为线框
如果您在场景中附加多个对象并“加入”它们，则各自的位置和旋转将在threeJs中得到尊重，否则不是：例如，如果你想在瓶子（和那些对象是不同的搅拌机文件，它们是附加/链接在场景中），花将不适合瓶子在threeJs中，但会有不同的位置和旋转瓶子
对对象进行分组并不能解决这个问题：要在 Blender 中看到场景，您必须“加入”对象（由此产生的后果）或手动更改三个 Js 上的位置和旋转 .dae 导出选项对于在 threeJs 中呈现对象无关紧要

现在，关于threeJs的部分：

请务必使用以下命令导入 colladaLoader：

<script src="jsLib/ColladaLoader.js"></script>

将此代码插入到您的 init() 函数中，以便加载器将加载您的 .dae 模型：

var loader = new THREE.ColladaLoader(); 
loader.options.convertUpAxis = true; 
loader.load( 'model.dae', function ( collada ) { 
  // with this you can get the objects of the scene; the [0] is not the first object 
  // you display in blender in case of many objects (which means you didn't join them) 
  var obj1 = collada.scene.children[0]; 
  // you can name the object so you can use it even out of the function, if you want 
  // animate it for example obj1.name = "daeObj1"; 
  // you can set here some material properties as trasparency 
  obj1.material.needsUpdate = true; 
  obj1.material.transparent = true; 
  obj1.material.opacity = 0.5; 
  obj1.hearth.material.wireframe = false; 
  // and now some position and rotation for good visualization 
  obj1.position.set(0, -5, -0.6); //x,z,y 
  obj1.rotation.set(0, 45, 0); 
  // and add the obj to the threeJs scene 
  scene.add(obj1); 
});

如果你想更新你的一些对象，还有一些 animate() 函数的代码，例如旋转

scene.traverse (function (object) { 
   if (object.name === 'daeObj1') { 
     object.rotation.z -= 0.01;
   }
 });

我希望有人能从这篇文章中受益

【讨论】：

虽然这很好，但最好显示结果或链接 Youtube 视频。谢谢