API to put shirt on 3d avatar - three.js

I created avatar 3d model (.glb) able to run from browser. I want user to upload the shirt(image)
and avatar dress should be updated accordingly.
I tried various options mixamo, readyplayer.me etc but they do not have option to update the avatar with custom dress, Is there any API for any open source solution for this. Pls suggest
Thanks
vijay

more info is needed but based on what is provided it sounds like you have means to extract material texture from photograph. Once you have the texture, then it would come down to matching UV layout and just applying the new texture to the material. this process would be the same in three.js, babylon.js or any other 3d library you use.

Related

Gltf file exported via GLTFExporter is grey color

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:

Cesium labels on a polyline (similiar to a textpath)?

I would like to recreate bent country labels according to the area of the country.
In d3 (or SVG) I can construct a polyline and then use a textpath to have text along it. Example: https://www.w3.org/TR/SVG2/images/text/text-path-startoffset.svg
Is it possible in Cesium to do something similar?
In Leaflet it is implemented like that: http://makinacorpus.github.io/Leaflet.TextPath/
There's no native support for that in the current version of Cesium. It may be mentioned on a wishlist or on a roadmap somewhere, but there are no short-term plans that I know of to add it to Cesium.
Even so, you may be able to find a workaround. For example, SVGs can be used as texturemap image sources in Cesium, so you could possibly use D3 to produce curved text on-the-fly and load the results into a Cesium billboard image or even a Cesium Globe inlay image. It would probably take some experimenting to figure out how to actually wire this up and how well it would work.

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

Flat shading OpenGL using Three.js

I am trying to simulate the OpenGL flat shading model using Three.js. My idea is creating an example like http://en.wikipedia.org/wiki/File:Phong-shading-sample.jpg. I was trying to change some different shading models but I cannot obtain the desired result.
Is it possible to create this scene in three.js?
Thanks in advance
Materials e.g. the MeshBasicMaterial have an option called "shading". It can be set to THREE.None, THREE.FlatShading, THREE.SmoothShading.
I am not sure if you need a light source in the first place or wether you have to enable shading for a the whole scene. Look at the demos at the Three.js website for something with shading.

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