Gltf file exported via GLTFExporter is grey color - three.js

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:

Related

Fbx color not display in 3 js editor

I need to see my 3D Objects in Viewer. Only i need to use 3 Js Editor.
I was shared my FBX File,this file original color is green but not preview Correctly. I don't know which property i need to change.
Can you please help me what is the problem is there?
This is original 3D file viewed in Blender.
But in Three Js Editor Showing Like this :
This is Link for Online 3 Js Editor => https://threejs.org/editor/
Sample File :
https://free3d.com/3d-model/android_icon_3d-13483.html
It appears that the model does not have color- or material information in the FBX-file. Try opening the FBX in blender and you see it rendered with default-material. Apparently only the .blend-version has color-information stored.
On the detail-page it also says "Materials: No".
You can try to re-export it from blender including material-information in another format.
You can add Directional Light to the scene and then the colors will be visible.

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.

using blender, how to add armature to svg image

I have 2d image of a person and converted the same into svg file, uploaded the file into blender and tried to add armature to it but somehow i could not find any relavant controls to bind armature to human shape(svg). Could anybody share the supporting docs..
Thanks
ASH
by adding armature plugin to blender tool complete human shaped armature option will be available under ADD-->Armature-->Human(Meta-Rig)
However complete 3d model cannot be generated from the svg object. At max all parts of the image object can be extruded.
Thanks
ASH

Three.js shadow map stripes in each light (now simplified, and with jsfiddle!)

I'm trying to create, modify and update (directional only for now) lights and shadowmaps dynamically. The light, shadow and shadow camera helper gets updated correctly as I move the light around or change shadow properties, except from the light's point of view, everything behind the origin (0,0,0) is shadowed for no apparent reason.
Screenshots:
http://i.imgur.com/n4AHvle.png
http://i.imgur.com/l0uaZHD.jpg
http://i.imgur.com/brKwCof.jpg
http://i.imgur.com/a6dqMGo.jpg (new, with spotlight)
You can see a scene with car and a piece of ground, they belong to a geometry imported with ColladaLoader. The problem is with shadowmapping, the car throws shadow correctly, but there are stripy shadows on the ground even though there is nothing else than the car obscuring light.
If I add more similar lights, they also have the same 4 stripes. They also appear with spotlight. If I change shadow map resolution, the stripes' size changes relative to each other, but there seems to be always four of them, spaced from center to both directions.
EDIT: JSFiddle here: http://jsfiddle.net/cL3hX/1/ There shouldn't be any shadows in the scene, unless some new geometry is introduced inside the shadow camera frustum.
Couple of notes on the fiddle:
I have r55, but the demo is r54 because jsfiddle apparently does not yet have r55.
I could only reproduce this with a Collada file. So it probably has something to do with the model. I created a simple cube in Sketchup 8, and tried to export it with various collada options.
In the JSFiddle I could only reproduce the bug with a file exported with "doublesided faces" -setting enabled. In my own application code, I do have the same bug on models created with or without that setting enabled, but in the fiddle, the bug seems to be triggered only when "doublesided faces" are exported. Anyway I do need to somehow show backsides of faces, because the tool I'm developing must work with Sketchup exports, and it's very hard to make models in Sketchup without having a mess of frontsides/backsides visible.
The very simple Collada file is included in the JSFiddle as javascript variable. Here's a download link for the same file: https://dl.dropbox.com/u/14489569/shadowmapdemo.dae
The problem is your Collada model.
Your "plane" is actually multiple coplanar faces back-to-back in a single geometry.
It's no wonder there are artifacts.
Replace it with a THREE.CubeGeometry.

Manipulate Blender Meta information by Three.js

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.

Resources