How to import Blender 3D Model to three.js - three.js

I tried to import Blender 3D Model to three.js using the three.js Blender Export plugin from the Threejs GitHub Repo but the latter has been removed. Is there another way to do it without using Three.js Blender Export ?
Please provide examples on the other methods.

I would recommend using the GLTF exporter for blender and the corresponding importer for THREE.js. GLTF is a modern format optimized for Web 3d content delivery.

Related

three.js / A-Frame ObjectLoader does not load Texture and positions Meshes wrongly

We have an issue with exporting our 3D Assets and animations correctly so that three.js can correctly display them.
All our 3D artists work with Cinema4D so we need to go through blender to export a three.js compatible JSON. They export the scene as FBX and then import it to blender. This seems to work fine. The model looks good there (with Material View set in Preview Window) and the simpler models we exported even worked with textures and animations.
But we now have a scene where, when we load the resulting JSON, some of the meshes are flipped 180° (but only some - the trees) and one of the models (Santa model) is not textured. They all look fine in blender.
When loading the JSON in https://threejs.org/editor/ you will immediately see the issues:
Is this an export problem? Can we fix it by tweaking the export params? Will we need to adjust the model in blender?
I would advise a couple things here:
File a bug on three.js including the .blend file
Try freezing transforms in Blender or C4D before export
Perhaps try a different three.js-compatible blender exporter, like glTF-Blender-Exporter.

How to export an animated texture from Blender to three.js?

I have an animated fire "burning" on a round plane on Blender. It's very similar to the one found in this tutorial link. I want the render the model on three.js.
I tried the Blend4Web HTML format and only the texture of the fire didn't appear.
I also, exported it to .json and collada with the three.js exporter. No results.
Do I use UV mapping?

Export Maya scene to Three.js

Is there any way to export the whole scene from Maya to Three.js.
Exported elements should be:
all mesh, textures, cameras, including the lights, shadows etc.
So that I can get the proper rendered effect that is been in the maya.
If you read the doc for the Maya exporter, it currently doesn't support exporting lights. You'll have to create the manually in your three.js code.
I don't know the current status of three.js loaders as I havn't used for a while now but back then Collada and FBX exporters were shaky. And still seem to be. You can try exporting from Maya to FBX and convert it (FBX file format supports lights).
OBJ file format doesn't support support lights of animation but this is the easiest way to go.
Long story short, export your models with the correct materials and create and place your lights manually.
PS: You can't export shadows.

Three JS Blender JSON EXPORTER smooth / flat shading

Blender has the ability to set a material to Flat or Smooth.
In the Blender exporter for three.js, when I check "Export Normals" to JS model, I always export all materials as Smooth. The exported file is twice bigger.
Is there a way to export models with Flat Shaded and Smooth shaded faces without need to set it manually in three.js ?
There is no flatshading/noshading/smoothshading equivalent in blender. However as few other features (blending, depthwrite, depthtest) it could be proposed in the 'threejs' part of the material pannel.
You could do it yourself by editing the following files in the addon :
constants.py,
__init__.py,
exporter/material.py,
exporter/api/material.py
(copy the way blending types work for example)
You would just pay attention that the blender io-three addon yet has a shading field for materials, used to define phong or lambert materials. You would just have to chose an other name.
Finally you would also have to edit threejs so the JSONLoader can parse the new property you add.
That said, it is a bit longer than setting your materials properties in your code, since you will always need to write material=new THREE.Mesh****Material(properties)...

3d models animation in webgl

I am new to webgl and am trying to animate objects, not simply rotating/moving them but complex motions. For example how can we make movements of hand/leg in a human model(as if the person is walking)?Right now I am using Three.js to import the OBJ model.
I used Blender 2.64 and Three.js exporter successfully to load animated model in the scene. Here is nice tutorial that explains everything from animation in Blender to exporting to Three.js (although it uses older version of exporter so the things you make won't work in their test application).
http://www.kadrmasconcepts.com/blog/2012/01/24/from-blender-to-threefab-exporting-three-js-morph-animations/

Resources