I need to display some blender models using webGL. Well what I need to know is, is it possible to add some meta information in Blender that we can manipulate using webGL ?
e.g:
Add in Blender a meta information about the lights location
Using Three.js (webGL), putting lights in place of lights meta information from Blender
I hope I could express my need well
Other than meshes, Three.js' Blender exporter supports exporting lights and cameras (and apparantly non-mesh, pure Object3Ds) out-of-the box. Just check the corresponding options together with the Scene export option during exporting and use the SceneLoader for loading. If you need other than that, you'd need to modify the exporter.
In Blender you can name the objects and in Three you can search for objects, lights and cameras by name. You can then hide, delete, replace, modify or clone those objects.
I have done this with Collada/DAE scenes.
Related
I exported a glft file on this demo page.
And then, I imported the file to Blender but 3d model looks grey color and seems missing color.
How to solve this problem?
Or doesn't glft have color data?
I'm new to glft and Blender, I'd appreciate if you share any solutions or references what I should read to solve it.
When debugging something like this, the first step is to narrow down the source of the issue. If the model appears correctly on viewers like http://gltf-viewer.donmccurdy.com/ or https://sandbox.babylonjs.com/, then the exporter is probably doing its part correctly. If not, file a bug on the threejs repo about the exporter.
If the Blender importer you're using can't load the file, I'd suggest filing a bug on that repository instead. I'd also suggest trying https://github.com/KhronosGroup/glTF-Blender-IO, if you haven't already.
Finally, note that by default when Blender opens, textures are disabled in the viewport. You have to enable Texture, Material, or Rendered in the Viewport Shading menu:
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.
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)...
I'm new to both Blender and ThreeJs and searched a lot before asking. I created a model with Blender and esported it as .dae so I can load it in the html canvas. The problem is that only the model is loaded and not the textures. I'm doing something wrong or it's the loader that somehow causes the problem?
Here is the sample:
http://provasitimek.herobo.com/firstImport2.html
and the code:
https://github.com/MarcinKwiatkowski1988/learningThreeJs/tree/master/ThreeJs_and_blender
PS. the blender version is 2.70 (so maybe the problem lays here?)
PS2: So, after many attempts, these are my conclusions:
to get the color of the object, you have to choose the Blender renderer and not Cycles renderer
the export to the file .dae is not realy significant, should working with all options (or at least I didn't find any differences between files exported with different options)
if you use Blender renderer and any basic materials (Basic, Lambert, Phong) you get only the color on the object rendered in threeJs: so, for example, if you apply a trasparency to you object on blender, you will not see it on the rendered object on threeJs
with my current level (i just started to learn threeJs and blender 2 weeks ago) this is as far as I can help. Hope someone with higher skills like #mrdoob would figure out what the problem is
THREE.js does not pair models and textures until you actually make a mesh. Export The model and texture separately, load them separately and call
new THREE.Mesh(blenderGeometry,blenderTexure)
What is the correct process for creating model in Blender and playing it in three.js?
Talking about skeletal animation. What to export, and which functions to call in order to play the animation on three.js. Also how should a trivial JSON exported file look like in order to work in three.js.
How exactly should a pipeline look like for correct results?
When exporting your animated model, you need to have "Skinning", "Bones" and "Skeletal animation" options checked in the exporter. The resulting json file should contain, among other things, non-empty skinWeights, bones and animation properties, like in this file: http://mrdoob.github.com/three.js/examples/obj/buffalo/buffalo.js
For playing the animation with Three.js, start with this example: http://mrdoob.github.com/three.js/examples/webgl_animation_skinning.html (available in the three.js source package).