ThreeJs和Blender(使用colladaLoader):第一次接触 [英] ThreeJs and Blender (using colladaLoader): first contact

问题描述

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

How can I render an exported scene (with many objects, each with different colors and different properties, such as rotation aroung an axis in the scene) from Blender (with colladaLoader -->.dae) in ThreeJs?

推荐答案

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

So, the first step is to learn how to create a scene in threeJs and learn some feature with Blender. When you are ready, create your first model and before exporting keep this in mind:

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

现在，关于threeJs的部分:

and now, the part that regards threeJs:

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

be sure to import the colladaLoader with:

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

将此代码插入您的 init() 函数中，以便加载程序加载您的 .dae 模型:

insert this code into your init() function so the loader will load your .dae model:

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() 函数的代码，例如旋转

and some code to the animate() function if you want to update some of your objects, with rotation for example

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

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

I hope someone will benefit from this post

这篇关于ThreeJs和Blender(使用colladaLoader):第一次接触的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！