web-dev-qa-db-fra.com

Exportateur Blender vers Three.js

Je viens de créer un maillage aléatoire à l'aide de Blender et je souhaite l'exporter pour l'utiliser en HTML5 via le fichier Three.js. Je n'ai pas vu de tutoriels décents montrant comment faire cela. quelqu'un peut-il m'aider avec cela? Je veux juste que le maillage 3D s'affiche sur le Web, sans animations. Merci!

html5canvasthree.jsblender
27
AJ Naidas

Le moyen le plus simple que j'ai trouvé après de nombreuses recherches et essais et erreurs était Three.ColladaLoader. Placez vos fichiers .dae dans un dossier intitulé models de votre répertoire /root. J'ai trouvé l'exportateur Blender JSON moins fiable. Appelez la fonction PinaCollada à partir de la fonction init(), par exemple:

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;
}
30
Orbiting Eden

vous avez besoin de l'exportateur de mélangeur trois js: lisez ceci

12
Brad Himelstein
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);
    }
});

Est un chargeur de base json pour THREE.JS; Vous devez également examiner:

Comment configurer le canevas, la scène, les lumières et la caméra (si vous ne les avez pas déjà et n'utilisez pas ceux de Blender)

morphTargets (si vous animez)

matériaux (si vous voulez Tweak)

11
Wyccant

La réponse sélectionnée ne renvoie pas de promesse ni de rappel, vous ne savez donc pas quand vous pouvez définir des paramètres. J'ai ajouté une petite classe qui va montrer comment vous pouvez l'utiliser. Il enveloppe le chargeur 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' );
};

Ensuite, pour l'utiliser, incluez le chargeur Collada:

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

et dans ton principal js

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