CODEWITHSUNDEEP
htmlcanvasthree.jsblender
AJ Naidas
AJ Naidas

Reputation: 1424

Blender export to Three.js

I just created a random mesh using Blender and I want to export it to be used in HTML5 via the Three.js. I haven't seen any decent tutorials that shows how to do this. Can anyone help me out with this? I just want the 3D Mesh to display in the web, no animations included. Thanks!

Upvotes: 29

Views: 33376

Answers (6)

Wyccant
Wyccant

Reputation: 111

Prior to Three version r99, you can achieve this with a basic JsonLoader but you also need to look into:

  • how to set up the canvas, scene, lights and camera (if you have not already and you are not using the blender ones)
  • morphTargets (if you are animating)
  • materials (if you want to tweak textures)
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);
    }
});

NB: After version r99, the JsonLoader have been deprecated.

Upvotes: 11

Orbiting Eden
Orbiting Eden

Reputation: 1512

The easiest way I found after many searches and trial and error was Three.ColladaLoader. Place your .dae files in a folder titled models in your /root directory. I found the Blender JSON exporter less reliable. Call the PinaCollada function from within the init() function, somthing like this:

function init(){
   const scene = new THREE.scene;
   // ...
   const object1 = new PinaCollada('model1', 1);
   scene.add(object1);
   const object2 = new PinaCollada('model2', 2);
   scene.add(object2);
   // ...
}

function PinaCollada(modelname, scale) {
   const loader = new THREE.ColladaLoader();
   let 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;
}

Upvotes: 29

Johnny
Johnny

Reputation: 15413

For those who are reading this in 2021, and hopefully later as well, I want to elaborate on the provided answers and comments, which are generally great.

First, the Three-to-Blender exporter is not a valid option anymore as it was removed from the Three.js code base.

Secondly, COLLADA is not viable too as it got too many corner cases with this format which is not well optimized for the Web.

So the recommended way now is to use Blender's glTF 2.0 exporter and Three.js GLTFLoader class. See this tutorial for usage.

Upvotes: 1

logic error
logic error

Reputation: 11

I used the: Blender3d ver 2.78, export script add-on found in three.js utilities folder with the three.js version 60, I added this script to my Blender's add-ons folder where the blender program was setup. Modeling in Sketchup, I exported as a model.dae ( Collada file ), imported that into Blender3d version 2.78 ran the setup for the add-on exporter, exporting Blender3d as a Three.js file. This json file I saved as a .js ( javascript-object ) and not as a .json (JavaScript Notation object)

that object, ( textured correctly ) was ran like this:

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

Upvotes: 0

newshorts
newshorts

Reputation: 1056

The selected answer doesn't return a promise or a callback, so you don't know when you can set things. I've added a small class that will and shown how you can use it. It wraps 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' );
};

Then to use it include the collada loader:

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

and in your main js

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

Upvotes: 0

Brad Himelstein
Brad Himelstein

Reputation: 141

you need the threejs blender exporter: read this

Upvotes: 12

Related Questions