gpt4 book ai didi

three.js - ThreeJs 和 Blender(使用 colladaLoader): first contact

转载 作者:行者123 更新时间:2023-12-02 19:32:31 24 4
gpt4 key购买 nike

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

最佳答案

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

  1. 你需要一个有顶点的对象,所以如果你只是用Blender创建一个文本,你必须将其转换为网格,否则 ThreeJs将无法渲染它
  2. 请务必选择 Blender 渲染选项而不是 Cycles,否则您导出的 .dae 将不会在 ThreeJs 中渲染
  3. 应用纹理时,仅使用颜色和基本 Material (basic、phong 和 lambert) - 其他 Material 将无法使用 colladaLoader
  4. 查看该对象是否将在 ThreeJs 中用颜色渲染colladaLoader 只是以对象模式查看 Blender 中的对象(实心) - 如果它是灰色的并且不是您选择的颜色,则它将以同样的方式在 ThreeJ 中渲染
  5. 如果将“solidify”修改器应用于对象,然后在 ThreeJs 上将其设置为透明,它将呈现为线框
  6. 如果您在场景中附加多个对象并“连接”它们,各自的位置和轮换将在 ThreeJ 中得到尊重,否则不:例如,如果你想渲染一朵花瓶子(那些对象是不同的 blender 文件,它们是场景中附加/链接),花无法放入瓶子中在三个J中,但会有不同的位置和旋转瓶子
  7. 对对象进行分组并不能解决这个问题:要像在 Blender 中看到的那样查看场景,您必须“加入”对象(这会带来后果)或手动更改 ThreeJ 上的位置和旋转.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;
}
});

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

关于three.js - ThreeJs 和 Blender(使用 colladaLoader): first contact,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23224940/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com