ThreeJs和Blender(使用colladaLoader):首次联系

本文介绍了ThreeJs和Blender(使用colladaLoader):首次联系的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在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:

您需要一个具有顶点的对象，因此，如果仅使用Blender创建文本，则必须将其转换为网格，否则threeJs将无法渲染它
请务必选择Blender渲染选项，而不要选择循环"，否则，导出的.dae文件将不会以threeJs呈现
应用纹理时，仅使用颜色和基本材料(基本，phong和lambert)-其他将无法使用colladaLoader
查看对象是否将以三个Js的颜色呈现colladaLoader只是在Blender中以对象模式查看对象(纯色)-如果是灰色而不是您选择的颜色，则为灰色将以相同的方式在threeJs中渲染
如果将'solidify'修饰符应用于对象，然后在threeJs上将其设置为透明，则将其渲染为线框
如果您在场景中附加多个对象并加入"它们，则各自的位置和旋转将以三秒为单位，否则:例如，如果要在瓶子(和thoose对象是不同的Blender文件，它们是在场景中附加/链接)，则花朵将无法容纳在瓶子中在三个Js中，但位置和旋转角度与瓶子
将对象分组并不能解决此问题:要在Blender中看到场景，您必须加入"对象(这将带来后果)或手动更改threeJs上的位置和旋转.dae导出选项与在ThreeJs中渲染对象无关紧要.

you need to an object with vertices, so if you just create a text with Blender, you have to convert it to a mesh, otherwise threeJs will not render it
be sure to choose the Blender render option and not the Cycles,otherwise the .dae you export will not be rendered in threeJs
when applying a texture, use just colors and basic materials (basic, phong and lambert) - the others will not work using the colladaLoader
to see if the object will be rendered with color in threeJs withcolladaLoader just look at object in Blender with object mode(solid) - if it's gray and not colored of the color you choose, itwill be rendered in threeJs the same way
if you apply the 'solidify' modifier to the object and then on threeJs set it to transparent, it will be rendered as wireframed
if you append multiple objects in the scene and 'join' them, therespective positions and rotations will be respected in threeJs,otherwise not: for example, if you want to renderize a flower in thebottle (and thoose objects are different blender files which areappended/linked in the scene), the flower will not fit in the bottlein threeJs, but would have a different position and rotation thanthe bottle
grouping the objects will not solve this: to see the scene as you see it in Blender you have to 'join' the objects (with the consequences that this entails) or manually change position and rotation on threeJsthe .dae export options don't matter for the rendering of the object in threeJs

现在，涉及到三个Js的部分:

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):首次联系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

threejs