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).
Related
I built a .glb viewer with Three.js. Whenever I want to display a model from Blender where the scale has not been applied before exporting (e.g. scale at 0.5 instead of 1), I get sizing issues in Three.js. It usually manifests in the model appearing smaller than its bounding box.
Is there a way to get consistent scale with Three.js?
Downloadable files:
This is the file that causes the problem:
https://firebasestorage.googleapis.com/v0/b/fotura3d-dev.appspot.com/o/cassette.glb?alt=media&token=27e08f59-68b4-4011-89a4-04bdc56365db
This is the file with transforms applied in Blender which works as expected in Three.js:
https://firebasestorage.googleapis.com/v0/b/fotura3d-dev.appspot.com/o/cassetteApplied.glb?alt=media&token=fc6decb1-aa36-4ab2-8582-9ce21111585b
Instead of scene.add(yourModel) ing your model to the scene.. try scene.attach(yourModel)
I've an object in Blender. Because I want to do some UV-unwrapping using ThreeJS (see here) I determined that I need merge two of the sides to correctly unwrap.
So before exporting the .blend as a .obj object I selected the Tris to Quads face option to create a square face for the two sides as opposed to it being made up of two triangles. Here's what it looked like in Blender:
But when I import the .obj and .mtl file into ThreeJs I get this:
Is this a problem to do with me not updating the material being added to the new object?
The handles appearing white makes me think this is the case. If so how can I go about fixing it?
When I see something like this, the first thing I usually do is to set the material to side: THREE.DoubleSide. If that helps, the problem has to do with the normal-directions (so the face is actually there but isn't rendered because it is facing away from you).
To fix this, you should try the following:
In blender you can enable displaying of normal-directions in the right-hand menu (select "Face normals in section "Mesh Display").
You should now see if any of the normals are pointing inwards/in the wrong direction.
There is an automatic fix that works well for properly constructed meshes:
select object and switch into edit-mode (<Tab>)
select all vertices (shortcut <A>)
via menu "Mesh" > "Normals" > "Recalculate Outside" (shortcut <Ctrl>+<N>).
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
I have made a pipe in Maya, on which I have animated the thickness (Below is an example of 4 of the keyframes in the animation). Unfortunately when I export it as an fbx file, the animation of the of the thickness is not saved. Is there a way to save an animation that would be something similar to this one or some help on getting this solution to work?
I'm fairly new to Maya so there might be something I'm missing. Hope you can help me.
Default FBX won't export the changes in the geometry - it will give you the position, rotation and scale of the object over time but not changes to vertex positions within the object.
You can turn on the 'Geometry Cache' option in the fbx export dialog:
Vertex Animation stored in FBX file without using Point Cache?
However not all applications that use FBX support geometry caches - you'll have to see what your target software supports. Other options might be to export a series of .OBJ files (1 per frame) and use the vertex data from those, or to use an animated geometry specific format like Alembic
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.