I made a gltf file with bone animation by using Blender.
It works well in Blender but not in Three.js
The model looks disconnected when they are moving.
Comparing my model in blender(upper pics) and in three.js
I tried several ways to solve it but did not make it.
Can you give me a solution to this?
Related
EDIT:
I had a question about exporting to obj and mtl but discovered that I could export from three.js using GLTFExporter.js and had success getting the geometry and texture out of three.js from that.
The issue I'm having with the GLTF Exporter is that I have textures that have offset and repeat settings that seem to not be exported from three.js when I open the file in Blender. In Blender the whole texture takes up the MeshPlane that used to only have a small part of the texture showing in Three.js scene.
Might anyone know what I could add to the GLTF Exporter to be able to record and keep the repeat and offset texture settings?
Many Thanks :)
I've hit this myself.. and as far as I know, the answer is No.
Offset and Repeat are THREE.js specific features. Some other libraries have equivalents.. some engines use direct texture matrix manipulation to achieve the same effect.
One workaround is to modify your models UV coordinates before exporting to reflect the settings of texture.offset and texture.repeat.
You would basically multiply each vertex UV by the texture.repeat, and then add texture.offset. That would effectively "bake" those parameters into the model UV's, but then would require you to reset .repeat and .offset back to 1,1 and 0,0 respectively, in order to render the model correctly again in THREE.js.
Here's a slightly relevant thread from the GLTF working group:
https://github.com/KhronosGroup/glTF/issues/107
I have created multiple 3D Cubes in a HTML5 Canvas .
I was trying to handle a click event on the 3D cube so that i can know which cube got clicked.
To create the cube I used processingJS.
It worked well but was not able to get the Click position.
I read about Paper JS which creates a shape and stores it in a object.
Is it possible to create 3D things with Paper JS.
Or Is there anyway i can get which cube got clicked through ProcessingJS.
please share whether there are any other ways to do this.
Thanks in advance.
Paper.js deals with 2D vector graphics.
While in theory you can represent a cube if you want to, using skewed squares for example, it will take a lot of effort and a lot of time to just create 1 cube.
You are much better of using a 3D library, e.g - Three.js.
Here is an already cooked up example using raycasting to detect the clicks on a side of the cube: http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html
I'm making a game with three.js in which an mesh will be rendered in greater detail as the player gets closer (i.e different geometry and material). This seems like it would be a common requirement in open world type games, and I was wondering what standard procedure is in three.js
It looks like changing the geometry of a mesh is quite computationally costly, so should I just store a different mesh for each distance, or is there an existing data structure for this purpose?
You want to use level-of-detail (LOD) modeling.
There is an example of that in the following three.js example: http://threejs.org/examples/webgl_lod.html
In the example, press the 'W/S' keys to see the effect.
three.js r.62
This will concerns only polygonals faces (object's faces with more than 4 edges)..
In 3DSMAX there are 3 exporting modes for .OBJ : Triangles, Quads and Polygons.
I've made many tests and get the same results with the two available workflows (importing .obj with OBJLoader and importing .js via convert_obj_three.py) :
polygons are not supported (see this image)
quads is ok for most polygonals objects, but three.js generates additionnals parasites faces onto some of them
The best result is obtained by setting export to Triangles mode (and thus to export heavier models), is it a known problem ?
I don't think it's a known problem, but rather something threejs just doesn't do. In 3d it's easier to deal with triangles than quads or polygons. I'm not 100% sure, you might want to check on github
After making a house model in blender I've exported it to three.js json format as a single object, but when adding it to scene I got half textures displayed and another half are just grey meshes.
JSON URL (with absolute texture images links): http://pobegushki.meetroll.net/inn1.js
Screenshot of what I get in blender and what I get in production:
Also there are two instances of a barrel model which both has a perfectly mapped material. I tried setting barrel image as a material to floor (simple scaled box mesh), but nothing changed, it still remained grey.
Any ideas?
I think there's a bug in the file loaders/Loader.js (Rev56). At line 332, try to replace:
if ( m.mapDiffuse && texturePath ) {
by
if ( m.mapDiffuse && texturePath != null ) {
(same bug for all types of textures of course)
I stumbled upon this bug this week-end, where my textures were not displayed because texturePath = "".
TATATATAAAM! I've solved the problem (the stupid way tbh, but I got fully textured model).
Behold: http://touhou.ru/upload/56e75518ab580497358741bec62491ff.png
Blender three.js export was creating empty textures for all untextured meshes I got, and I tried copy-pasting non-empty materials to empties. After thousands of page refreshes I got right materials assigned to right meshes.
It took pretty much time, I think I should submit a bugreport :(
UPDATE: Here's why those materials were empty on export:
On the first picture I've selected a mesh which had texture in production and on the second is one which didn't.
Thanks for your attention!