搅拌机出口到Three.js

我刚刚创建了一个使用Blender的随机网格，我想通过Three.js将其导出到HTML5中使用。我还没有看到任何体面的教程，显示如何做到这一点。任何人都可以帮我解决这个问题吗？我只想将3D网格显示在网页上，不包含任何动画。谢谢！搅拌机出口到Three.js

来源

2012-03-20 AJ Naidas

这里是一个简单three.js所用搅拌机教程 – pakotzintote 2013-01-02 22:13:39

查看此博文： http://www.kadrmasconcepts.com/blog/2011/06/06/three-js-blender-2-5-ftw/ – 2012-08-02 03:26:34

我许多搜索和反复试验后发现，最简单的方法是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; 
}

来源

2012-05-17 22:54:42

+13

皮尼亚·卡拉达双关语的+1。 – 2012-06-22 00:11:08

您需要在回调中返回localObject变量，并删除函数中的'colladaReady'名称。 – 2013-01-24 13:24:49

您需要的threejs搅拌机出口：read this

来源

2012-04-03 16:30:47

I还没有试过ColladaLoader但我倾向于同意ThreeJS Blender Exporter及其json输出将是首选，只是因为它是“官方”ThreeJS格式，至少在时间上应该是最受支持和稳定的流水线来自Blender。我只是猜测，所以我可能是错的... – null 2012-10-21 03:35:31

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（如果你是动画）

材料（如果你想调整）

来源

2012-06-21 10:30:20 Wyccant

所选答案不返回一个承诺或回调，所以你不知道什么时候你可以设置的东西。我已经添加了一个小课程，并展示了如何使用它。它包装collada装载机。

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); 
});

来源

2017-05-14 16:17:16 newshorts

搅拌机出口到Three.js

回答

相关问题