Blender 导出到 Three.js

Posted 2023-02-27

【中文标题】Blender 导出到 Three.js

【英文标题】：Blender export to Three.js

【发布时间】：2012-04-04 17:20:44

【问题描述】：

我刚刚使用 Blender 创建了一个随机网格，我想将其导出以通过 Three.js 在 html5 中使用。我还没有看到任何体面的教程来展示如何做到这一点。谁能帮我解决这个问题？我只希望 3D Mesh 在网络中显示，不包括动画。谢谢！

【问题讨论】：

查看这篇博文：kadrmasconcepts.com/blog/2011/06/06/three-js-blender-2-5-ftw

这里是一个简单的three.js和blender教程youtube.com/watch?v=d41Fw_CIxHA>

【参考方案1】：

经过多次搜索和反复试验，我发现最简单的方法是Three.ColladaLoader。将.dae 文件放在/root 目录中名为models 的文件夹中。我发现 Blender JSON 导出器不太可靠。从 init() 函数中调用 PinaCollada 函数，如下所示：

function init()
    scene = new THREE.scene;
    ...
    var object1 = new PinaCollada('model1', 1);
    scene.add(object1); 
    var object2 = new PinaCollada('model2', 2);
    scene.add(object2); 
    ...


function PinaCollada(modelname, scale) 
    var loader = new THREE.ColladaLoader();
    var localObject;
    loader.options.convertUpAxis = true;
    loader.load( 'models/'+modelname+'.dae', function colladaReady( collada ) 
        localObject = collada.scene;
        localObject.scale.x = localObject.scale.y = localObject.scale.z = scale;
        localObject.updateMatrix();
     );
    return localObject;

【讨论】：

您需要在回调中返回 localObject 变量，并删除函数上的 'colladaReady' 名称。

【参考方案2】：

您需要 threejs 搅拌机导出器：read this

【讨论】：

我没有广泛尝试过 ColladaLoader，但我倾向于同意 ThreeJS Blender Exporter 及其 json 输出将是首选，只要它是“官方”ThreeJS 格式和至少在时间上，应该是 Blender 最受支持和最稳定的管道。我只是推测，所以我可能是错的......

值得一提的是，这个导出器很久很久以前就从 Three.js 中删除了，所以它不再是一个可行的解决方案了。

【参考方案3】：

var loader = new THREE.JSONLoader(true);
loader.load(
    model: "model.js",
    callback: function(geometry) 
        mesh = new THREE.Mesh(geometry,new THREE.MeshFaceMaterial);
        mesh.position.set(0,0,0);
        mesh.scale.set(20,20,20);
        scene.add(mesh);
        renderer.render(scene, camera);
    
);

是 THREE.JS 的基本 json 加载器； 您还需要调查：

如何设置画布、场景、灯光和相机（如果您还没有使用搅拌器）

morphTargets（如果您正在制作动画）

材料（如果你想调整）

【参考方案4】：

选择的答案不返回承诺或回调，所以你不知道什么时候可以设置。我添加了一个小类，它会展示你如何使用它。它包装了 collada loader。

var ColladaLoaderBubbleWrapper = function() 
    this.file = null;
    this.loader = new THREE.ColladaLoader();
    this.resolve = null;
    this.reject = null;

    this.colladaLoadedNotifier = this.colladaLoadedNotifier.bind(this);
    this.onLoad = this.onLoad.bind(this);
;

ColladaLoaderBubbleWrapper.prototype.loadCollada = function(file) 
    this.loader.load(file, this.onLoad, this.onDownloadProgress);
    return new Promise(this.colladaLoadedNotifier);
;

ColladaLoaderBubbleWrapper.prototype.colladaLoadedNotifier = function(resolve, reject) 
    this.resolve = resolve;
    this.reject = reject;
;

ColladaLoaderBubbleWrapper.prototype.onLoad = function(collada) 
    this.resolve(collada);
;

ColladaLoaderBubbleWrapper.prototype.onDownloadProgress = function(xhr) 
    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
;

然后使用它包括 collada 加载器：

<script src="js/loaders/ColladaLoader2.js"></script>
<script src="js/blender/colladaBubbleWrap.js"></script>

在你的主 js 中

var colladaLoader = new ColladaLoaderBubbleWrapper();
var colladaLoaded = colladaLoader.loadCollada('colladas/brick/brick.dae');
colladaLoaded.then(function(collada) 
    scene.add( collada.scene );
);

【参考方案5】：

我使用了： Blender3d ver 2.78，在three.js实用程序文件夹中找到的导出脚本插件 使用 three.js 版本 60，我将此脚本添加到 Blender 的附加组件文件夹中 设置搅拌机程序的地方。在 Sketchup 中建模，我导出为 model.dae （ Collada 文件），将其导入 Blender3d 版本 2.78 运行设置 附加导出器，将 Blender3d 导出为 Three.js 文件。我保存的这个 json 文件 作为 .js ( javascript-object ) 而不是 .json (JavaScript Notation 对象)

那个对象，（纹理正确）是这样运行的：

///// GROUND CHERRY MESH    

var myShaderMaterial = new THREE.MeshPhongMaterial( 
          // ADDING TEXTURE 
    map: THREE.ImageUtils.loadTexture('models/MyBistro/ShelfTextures/ground_cherryTEX_001a1.png'),
    specular: 0xFFFFFF,
    shininess: 80,
);         
          // ADDING MODEL OBJ  
var loader = new THREE.ObjectLoader( manager );
loader.load( 'models/MyBistro/ShelfTextures/MyShader1aTEST_TWO.js',  function ( object )       
    object.traverse( function ( child ) 
        if ( child instanceof THREE.Mesh ) 
            var geometry = child.geometry;
            object = new THREE.Mesh(geometry,  myShaderMaterial);
            object.scale.set(1.60, 1.60, 1.60);         
            object.position.x =  + 22.10;           
            object.position.y =  - 84.0;            
            object.position.z =  - 4.0;                     
            object.rotation.y = Math.PI / 0.10;                     
            object.castShadow = true;
            object.receiveShadow = true;            
            child.material.map = myShaderMaterial;
            child.material.needsUpdate = true;          
               
    ); 
  scene.add( object );  
);

【参考方案6】：

对于那些在 2021 年阅读这篇文章的人，希望以后也能阅读，我想详细说明所提供的答案和 cmets，它们通常都很棒。

首先，Three-to-Blender 导出器不再是有效选项，因为它已从 Three.js 代码库中删除。

其次，COLLADA 也不可行，因为这种格式有太多的极端情况，没有很好地针对 Web 进行优化。

所以现在推荐的方法是使用 Blender 的 glTF 2.0 导出器和 Three.js GLTFLoader 类。用法见this tutorial。