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!Exportación de Blender a Three.js
Respuesta
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;
}
+1 por el juego de palabras PiñaCollada. –
Debe devolver la variable localObject en una devolución de llamada, y eliminar el nombre 'colladaReady' en la función. –
necesita el threejs exportador batidora: read this
I no he probado el ColladaLoader extensivamente, pero yo tendería a estar de acuerdo en que el exportador ThreeJS Blender y su producto json serían la opción preferida, aunque solo fuera porque es el formato ThreeJS "oficial" y debería, al menos a tiempo, ser el canal más compatible y estable de Blender. Solo estoy especulando, así que podría estar equivocado ... – null
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)
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);
});
- 1. Exportación de una malla three.js como OBJ o STL
- 2. Three.js - cambio material en tiempo de ejecución
- 3. Blender: walk around sphere
- 4. Blender vs. Unity
- 5. Exportación de MySQL a MongoDB
- 6. Three.js JSONLoader
- 7. Blender 2.6.1 export to ogre
- 8. Highcharts - exportación a base 64
- 9. jQuery Tabla a exportación CSV
- 10. Three.js Ellipse
- 11. THREE.js renderers
- 12. Three.js - memoria de liberación
- 13. Importar modelo desde 3dStudioMax a THREE.js
- 14. Blender, tutoriales de scripts de Python
- 15. three.js patrón de herencia
- 16. Cómo analizar el código fuente de Blender
- 17. Exportación de SQLite a SQL Server
- 18. Exportación del registro de Subversion a CSV
- 19. Unix: Obtener ruta de exportación a "Stick"
- 20. Exportación de tareas a 'C usando DPI
- 21. Exportación de SSRS a Excel sin encabezados
- 22. Exportación de HTML a PDF (C#)
- 23. Exportación de tablas R a HTML
- 24. Exportación a problemas de codificación CSV
- 25. Exportación de un ListView a formato Excel
- 26. Symfony 2 Exportación de Doctrine a JSON
- 27. Three.js - ¿Formas personalizadas?
- 28. Morphing con Three.js
- 29. Three.js - plano material múltiple
- 30. Three.js First Person Controls
aquí es un simple tutorial three.js con batidora –
pakotzintote
Revisa esta publicación del blog: http://www.kadrmasconcepts.com/blog/2011/06/06/three-js-blender-2-5-ftw/ –