Blender export to Three.js

Question

Я только что создал случайную сетку, используя Blender, и я хочу экспортировать ее для использования в HTML5 через Three.js. Я не видел никаких достойных учебников, которые показывают, как это сделать. Может ли кто-нибудь помочь мне с этим? Я просто хочу, чтобы 3D-сетка отображалась в Интернете, а анимация не включалась. Благодаря!

Answer 1

Самый простой способ я нашел после долгих поисков и проб и ошибок был Three.ColladaLoader. Поместите файлы .dae в папку под названием models в вашем каталоге /root. Я обнаружил, что экспортер Blender JSON менее надежный. Вызов функции PinaCollada из функции init(), Somthing так:

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

Answer 2

вам нужен threejs блендера экспортер: read this

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

Является основной загрузчик для JSON three.js; вы также должны смотреть в:

Как настроить холст, сцена, свет и камеры (если вы уже не имеете и не используют те, блендер)

morphTargets (если вы оживляющий)

материалов (если вы хотите настроить)

Answer 4

выбранный ответ не возвращает обещание или обратный вызов, так что вы не знаете, когда вы можете установить вещи. Я добавил небольшой класс, который будет показан и показан, как вы можете его использовать. Он обертывает загрузчик 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); 
});