html5 - texture - threejs exporters

Blender exporta a Three.js

Question

Acabo de crear una malla aleatoria utilizando Blender y quiero exportarla para usarla en HTML5 a través del 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 respuesta seleccionada no devuelve una promesa o una devolución de llamada, por lo que no sabe cuándo puede establecer las 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 para usarlo, incluye el cargador de collada:

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

y en tu js principal

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

Answer 2

necesitas el exportador de licuadora threejs: lee esto

Answer 3

La forma más fácil que encontré después de muchas búsquedas y prueba 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 desde la función init() , algo así:

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 4

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 cargador json básico para THREE.JS; también necesitas ver:

Cómo configurar el lienzo, la escena, las luces y la cámara (si aún no lo has hecho y no estás usando los mezcladores)

morphTargets (si estás animando)

materiales (si quieres modificarlos)