I'm working a simple proof of concept. This involves exporting a simple textured model from Blender into the an .obj model file, an .mtl material file, and some .jpg texture images. My model is a single plane with a grass texture on the top of it.
The problem I'm having is the grass texture isn't loading. I'm getting console messages and the JS code looks to be actually loading the image file, but it's not showing up. The plane is a green colour, which I don't understand, since I havent defined colours anywhere. I'm not sure if this is a rendering problem.
I had a look at the examples ThreeJS provides, but they're slightly different than the files I'm getting from blender. The obj loader example doesn't include any .mtl files. The obj + mtl loader example is using some .dds files for the models, which I don't have. I had a quick look into it and it has something to do with direct x.
My example is up at https://www.raydowe.com/three/
Does anyone have an example of how to load .obj, .mtl, and .jpg assets into ThreeJS?
so, this is easy you need texture coordinate to map the texture onto the vertices. In the *.obj it is represented into "vt"
https://github.com/koolkap/Obj-Mtl-Loader
This is your working sample
https://github.com/koolkap/Obj-Mtl-Loader/blob/master/obj/scene.obj
this is *.obj required.
feel free to ask
Related
So, as a starter on Blender, I've downloaded a 3d file from the internet. I've been able to import the object (.obj file) to the scene, but noticed one thing: There are 12 pictures in a folder called "Textures" that come with the downloaded object. How do I import these textures to the scene and apply them to the object? It is a good note that the object itself is not a whole, it is a combination of other objects.
Blender objects use materials to add color and shading to each mesh face. We assign textures to each material. The UV map image textures are assigned to a material in a process called skinning. You might just need to select the object and then look in the Material and Texture properties. Each Texture will have a folder icon to set the location of the texture image file.
YouTube offers many how-to videos about how to UV wrap an object. Just don't make your task too difficult. You probably only need to set the correct image texture png for each UV texture.
Hang in there and good luck.
I'm new to Unity and I want to develop a small racing Game. I started to draw the basic parts of the track in an external 3D tool. I saved my designed parts as an .obj file and imported them into unity. An example looks like this.
What the .obj looks like
The curve had 3 parts, both walls and the ground between those, the ground is a surface object(comes from the .obj file). Now I tried to get something like this:
Desired Result
But the only way to achieve this optic was to make a new GameObject->Image and set it just above the Ground, there must be an easier way of getting this optic without an extra image. I defined a material out of an image showing asphalt and put it over the surface but the surface just got darker(seems like the average color inside the picture) and didn't show the material.
When I put in a GameObject->Plane and drop the same material onto the plane it looks just like the picture which is perfect, but why isn't it working on my surface out of my .obj file. Can you please show me the correct way to get this done.
I am rendering a model imported from a .ctm file into threejs v71. I'm then adding a texture using a MeshBasicMaterial with map.
The original model was made in Agisoft Photoscan, exported as .obj, and then converted to OpenCTM format using the official OpenCTM viewer program. The .ctm model itself is here.
It looks correct, except that strange "seams" appear on the texture when I load the .ctm . The .obj loads fine in three.js with no seams. What are these, and how do I get rid of them?
Here's a screenshot:
These "seams" are not present in the texture file:
UPDATE: I noticed that the seams are also visible when viewing the .ctm in the ctm viewer, so this is probably an OpenCtm conversion problem rather than a threejs loading issue.
To my chagrin it seems this is a longstanding bug in OpenCTM.
The other answers must not be reproducing the situation described in the question.
Edit: I now fully understand this problem and have a workaround for it. The issue is that most programs (Photoscan, Blender) have "per-loop" vertices instead of actual "per-vertex" textures. This just means that when a vertex is shared by two polygons, there can be multiple UV coordinates for that vertex. CTM can only have one UV coordinate per vertex and that's what causes the problem at texture seams.
My workaround in blender is:
Seams from Islands
Select an edge on seam, select similar --> seam. Now all seams should be selected
Mesh --> Edges --> Edge Split
Export to .obj, use ctmviewer.exe to import and export to .ctm.
The seams are still visible if you look closely but no longer obvious multicolored bands.
I had the same issue with my Agisoft Photoscan model/texture, so I opened the texture in Photoshop and noticed it had transparency between all the patches of texture. I filled all the gaps using content aware fill and saved the texture out as a .tif without layers. This solved the issue for me.
Or you can just remove the alpha-channel from the texture image file (or use JPG format during export).
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)
I want to bake my model lightmap in blender then load them all in three.js.
So in blender i set two uvs for each objects and baked ambient occlusion in second uv. finally i exported whole scene via three.js exporter into js file.
(exporter has problem that the baked texture goes for diffuse-map not light-map which is correctable by editing exported js file).
But the problem is when i load js with SceneLoader, the textures especially for my floor goes wrong, like upside down.
here is my test files: Test Light Map
So is there something wrong with my blender file or ...? Which loader i should use for it?
Thanks.
I just upload some images to see what i mean:
Messed up textures:
After edit js file, it's get better. but still there is problem at the edges:
And specially at floor, the light-map goes wrong:
Ok, i don't know why, but it seems my uvs was messed up in blender. i did some recaculate normals and flip normals in blender and now textures map fine on objects.
But i still need to edit exported scene to change map:texture.png to lightMap:texture.png.
[EDIT]
Actually this is a bug related to three.js scene exporter: Blender Exporter - Scene Exporting
[Final Answer]
The problem was about my model which had a negative scale in blender. i select my model, hit crtl+a then choose scale. now everything's fine.