搅拌机出口到Three.js
我刚刚创建了一个使用Blender的随机网格,我想通过Three.js将其导出到HTML5中使用。我还没有看到任何体面的教程,显示如何做到这一点。任何人都可以帮我解决这个问题吗?我只想将3D网格显示在网页上,不包含任何动画。谢谢!搅拌机出口到Three.js
我许多搜索和反复试验后发现,最简单的方法是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;
}
皮尼亚·卡拉达双关语的+1。 – 2012-06-22 00:11:08
您需要在回调中返回localObject变量,并删除函数中的'colladaReady'名称。 – 2013-01-24 13:24:49
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(如果你是动画)
材料(如果你想调整)
所选答案不返回一个承诺或回调,所以你不知道什么时候你可以设置的东西。我已经添加了一个小课程,并展示了如何使用它。它包装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);
});
这里是一个简单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