Blender-Export nach Three.js

Lesezeit: 4 Minuten

Benutzer-Avatar
AJ Naidas

Ich habe gerade ein zufälliges Mesh mit Blender erstellt und möchte es exportieren, um es über Three.js in HTML5 zu verwenden. Ich habe keine anständigen Tutorials gesehen, die zeigen, wie das geht. Kann mir jemand dabei helfen? Ich möchte nur, dass das 3D-Mesh im Web angezeigt wird, keine Animationen enthalten. Vielen Dank!

Der einfachste Weg, den ich nach vielen Suchen und Ausprobieren gefunden habe, war Three.ColladaLoader. Platzieren Sie Ihre .dae Dateien in einem Ordner mit dem Titel models in deiner /root Verzeichnis. Ich fand den JSON-Exporter von Blender weniger zuverlässig. Rufen Sie die PinaCollada-Funktion innerhalb von auf init() Funktion, etwa so:

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

  • Sie müssen die localObject-Variable bei einem Rückruf zurückgeben und den Namen „colladaReady“ aus der Funktion entfernen.

    – Richard Astbury

    24. Januar 2013 um 13:24 Uhr

Sie benötigen den Threejs-Mixer-Exporter: lesen Sie dies

  • Ich habe den ColladaLoader nicht ausgiebig ausprobiert, aber ich würde eher zustimmen, dass der ThreeJS Blender Exporter und seine json-Ausgabe die bevorzugte Wahl wären, wenn auch nur insofern, als es das “offizielle” ThreeJS-Format ist und es zumindest mit der Zeit sein sollte die am besten unterstützte und stabilste Pipeline von Blender. Ich spekuliere nur, also kann ich mich irren…

    – Null

    21. Oktober 2012 um 3:35 Uhr

  • Es ist wichtig zu erwähnen, dass dieser Exporter vor langer, langer Zeit aus Three.js entfernt wurde, sodass er keine praktikable Lösung mehr darstellt.

    – Johnny

    9. Dezember 2021 um 13:13 Uhr


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

Ist ein grundlegender JSON-Loader für THREE.JS; du musst auch nachsehen:

So richten Sie die Leinwand, die Szene, die Lichter und die Kamera ein (falls Sie dies noch nicht getan haben und die Blender nicht verwenden)

morphTargets (wenn Sie animieren)

Materialien (wenn Sie optimieren möchten)

Die ausgewählte Antwort gibt kein Versprechen oder einen Rückruf zurück, sodass Sie nicht wissen, wann Sie etwas einstellen können. Ich habe eine kleine Klasse hinzugefügt und gezeigt, wie Sie sie verwenden können. Es wickelt Collada Loader.

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

Um es dann zu verwenden, schließen Sie den Collada-Loader ein:

<script src="https://stackoverflow.com/questions/9783458/js/loaders/ColladaLoader2.js"></script>
<script src="js/blender/colladaBubbleWrap.js"></script>

und in Ihrem Haupt-js

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

Ich habe Folgendes verwendet: Blender3d Version 2.78, Export-Skript-Add-on, gefunden im Ordner mit den Hilfsprogrammen von three.js mit der Version 60 von three.js. Ich habe dieses Skript zu meinem Add-ons-Ordner von Blender hinzugefügt, in dem das Blender-Programm eingerichtet wurde. Beim Modellieren in Sketchup habe ich als model.dae (Collada-Datei) exportiert, das in Blender3d Version 2.78 importiert, das Setup für den Add-On-Exporter ausgeführt und Blender3d als Three.js-Datei exportiert. Diese JSON-Datei habe ich als .js ( javascript-object ) und nicht als .json (JavaScript Notation object) gespeichert.

Dieses Objekt (korrekt texturiert) wurde wie folgt ausgeführt:

///// GROUND CHERRY MESH    

var myShaderMaterial = new THREE.MeshPhongMaterial({ 
          // ADDING TEXTURE 
    map: THREE.ImageUtils.loadTexture('models/MyBistro/ShelfTextures/ground_cherryTEX_001a1.png'),
    specular: 0xFFFFFF,
    shininess: 80,
});         
          // ADDING MODEL OBJ  
var loader = new THREE.ObjectLoader( manager );
loader.load( 'models/MyBistro/ShelfTextures/MyShader1aTEST_TWO.js',  function ( object ){       
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            var geometry = child.geometry;
            object = new THREE.Mesh(geometry,  myShaderMaterial);
            object.scale.set(1.60, 1.60, 1.60);         
            object.position.x =  + 22.10;           
            object.position.y =  - 84.0;            
            object.position.z =  - 4.0;                     
            object.rotation.y = Math.PI / 0.10;                     
            object.castShadow = true;
            object.receiveShadow = true;            
            child.material.map = myShaderMaterial;
            child.material.needsUpdate = true;          
         }      
    }); 
  scene.add( object );  
});

Für diejenigen, die dies im Jahr 2021 und hoffentlich auch später lesen, möchte ich auf die bereitgestellten Antworten und Kommentare eingehen, die im Allgemeinen großartig sind.

Zuerst die Three-to-Blender-Exporter ist keine gültige Option mehr da es aus der Three.js-Codebasis entfernt wurde.

Zweitens, COLLADA ist auch nicht lebensfähig da es bei diesem für das Web nicht gut optimierten Format zu viele Ausnahmefälle gab.

Daher ist der empfohlene Weg jetzt, den glTF 2.0-Exporter von Blender und die GLTFLoader-Klasse von Three.js zu verwenden. Sehen dieses Tutorial für den einsatz.

1053690cookie-checkBlender-Export nach Three.js

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy