Exportación de Blender a Three.js

Question

Acabo de crear una malla aleatoria utilizando Blender y quiero exportarla para usarla en HTML5 a través de Three.js. No he visto ningún tutorial decente que muestre cómo hacerlo. ¿Puede alguien ayudarme con esto? Solo quiero que 3D Mesh se muestre en la web, no incluye animaciones. ¡Gracias!

Answer 1

La forma más sencilla que encontré después de muchas búsquedas y ensayo y error fue Three.ColladaLoader. Coloque sus archivos .dae en una carpeta titulada models en su directorio /root. Encontré que el exportador Blender JSON es menos confiable. Llame a la función PinaCollada dentro de la función init(), algo como esto:

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

necesita el threejs exportador batidora: 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); 
    } 
}); 

es un gestor básico JSON para Three.js; también hay que mirar en:

Cómo configurar el lienzo, escena, luces y la cámara (si no lo ha hecho y no está utilizando los batidora)

morphTargets (si es que está animando)

materiales (si desea modificar)

Answer 4

La respuesta seleccionada no devuelve una promesa o una devolución de llamada, por lo que no se sabe cuándo se puede configurar cosas. He agregado una clase pequeña que lo mostrará y cómo puede usarlo. Envuelve el cargador de 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'); 
}; 

Luego de usar que incluye el cargador Collada:

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

y en sus principales js

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