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