I load a dae model created in Sketctup (https://graviditetsberegner.dk/square.skp) in Three.js. I found that dae models were the best regarding texture placement and hierarchical placement of the different components when going from Sketchup to Three.js. I load the model using the below code without any modification to meshes:
var modelLoader = new THREE.ColladaLoader();
modelLoader.load("https://www.graviditetsberegner.dk/square.dae", function (dae) {
model = dae.scene.clone();
scene.add(model);
...
The model loads fine, but when I rotate the camera (and sometimes just when it loads), it looks really blurry and white lines appear.
Is there an option or something I can set to make it looks smooth and without the white lines? I have tried antialias for the renderer without much effect.
A fiddle can be found here: https://jsfiddle.net/35wc6myf/
It looks like this in SketchUp:
Not sure about the export settings on your Sketchup file, but it looks like it's adding quite a few LineSegments objects with their color set to white. Could be that these exist in your scene hierarchy, but their visibility has been turned off, or they get added upon export. I was able to remove the white lines in your fiddle by adding this code right after you clone your scene:
model = dae.scene.clone();
model.children[0].children.forEach(child => {
if (child.type == "LineSegments") {
child.visible = false;
}
});
Result:
Related
I try to use threeGLTFLoader to load gltf ,problem with the material,the model is a man’s head but now i could see the back
here is the code:
var threeGLTFLoader = new THREE.GLTFLoader();
var objPositions;
threeGLTFLoader.load("../resources/untitled.gltf", function (gltf) {
model = gltf.scene;
model.name = "man";
model.scale.set(300, 300, 300);
root.matrixAutoUpdate = false;
root.updateMatrix();
root.add(model);
});
The link of 3D model
Without the model it's hard to guess what's going on here, but I'll wager a guess based on seeing this kind of back-is-in-front rendering before.
I think your glTF model probably has materials that are marked "alphaMode": "BLEND".
In most realtime 3D rendering systems, including ThreeJS, blended or translucent materials will disable the depth buffer, and can be rendered out of order. There are ways for some engines to fix or work around this, but they can cost performance and increase complexity.
For opaque materials in a glTF file, the best thing to do is leave alphaMode set to its default value OPAQUE. Only materials that really need to be translucent should be set to BLEND.
Ed Mackey’s answer on GitHub is a good explanation of why this is happening. If you’re the author of the model, it’s an issue you could fix by disabling transparency on parts of the model that aren’t meant to be transparent. If you’re not the author of the model, you can override the incorrect transparency settings after loading the model in three.js:
model.traverse((object) => {
if (object.isMesh) object.material.transparent = false;
});
This code will disable transparency everywhere on the model. In more complex cases you may need to select specific parts of the mesh to override, and that is easier to do in Blender, using Alpha Clip or Opaque modes.
I'm using a free 3d model from turbosquid. This model is using a texture that looks like this:
It does look good in Blender:
But once exported to three.js, it seems that the texture does not follow the uv map:
Here is the code i'm using:
var loader = new THREE.JSONLoader();
loader.load('json/Ship.json', function ( geometry, materials ) {
ship = new THREE.Mesh(geometry, materials[0]);
scene.add(ship);
}
);
And here is the json I get once exported from Blender:
What am I missing?
Thanks a lot for your help!
There are some minor complexities in this model, which I think are causing issues for Blender exporters. They're not "wrong", but they're hard for exporters to handle without cleanup. You can fix those manually (open the .blend file in Blender, apply modifiers, remove all textures except the diffuse) but the easiest path is probably converting the OBJ version provided by Turbosquid to glTF. Going to the Cesium OBJ->glTF converter (or OBJ2GLTF if you need something programmatic) and dragging in the OBJ/MTL/texture will give the right result. NOTE: you'll need to move the sh3.jpg file into the same directory as the MTL file; it shouldn't be in the Textures/ folder.
Result on https://gltf-viewer.donmccurdy.com/ — using three.js r92 and THREE.GLTFLoader.
I have recently imported both .blend and .fbx files into my game, and I would like to change their color in-game. To color them, I am using diffuse shaders, and have tried this command:
gameObject.GetComponent<MeshRenderer>().material.color = Color.red;
as well as this command:
gameObject.GetComponent<MeshRenderer>().material.SetColor("_Color", Color.red);
For some reason, both of these work perfectly on pre-generated Unity cubes, but not on my models, even though they have the mesh renderer component. Any suggestions?
There could be several reasons why your code doesn't work.
I would recommend changing the color of your object in the Editor, if it works - your objects are fine.
_Color is just a label, that usually marks the Main Color. Open your shader and check if the label _Color exists or not. Please check this from unity documentation http://docs.unity3d.com/ScriptReference/Material.SetColor.html
maybe you are changing the _Color of the parent object, but the material you are looking at belongs to the child object.
I have a scene which I am exporting from Blender using the Three.js exporter. After a bit of trial and error I got it to export fine. When I tried to import it into Three, I got a few WebGL errors like glDrawElements: range out of bounds for buffer, which seemed to be related to the size or positioning of the imported object. I mucked around with some stuff related to size and eventually got it to load fine. However, none of my materials with textures are loading, EXCEPT one, which was an object with a single material applied to it.
Here's my pipeline
Create base for the level in my three js editor tool
Export this and import it into Blender for texturing/uv mapping (works fine)
Objects can have a number of materials, one for each face really, each material can have a different texture mapped to it (all good, objects are uv unwrapped etc..,)
Join all objects together (except one object which is a tree with a single material/texture applied to it)
Export the Blender file as a JSON file via the Three.js exporter
Load the file into Three using the SceneImporter
When it comes into Three, there are two objects, one is the tree which has a single texture mapped to its material. The other is a large geometry with 20 materials and textures mapped. This geometry does not have any textures displaying and just shows as a MeshLambertMaterial.
Has anyone else experienced any issues like this? Any solutions?
Seems like the SceneImporter doesn't know what to do with these materials, but all the data is there, so you'll need to give it a little help.
Like so;
loader.load('sceneWithObjectOfManyFaceMaterials.json' , function(loaded)
{
for(var key in loaded.objects)
{
var mesh = loaded.objects[key];
if(mesh.material.materials)
{
mesh.material.materials.forEach(function(m , i)
{
m.map = loaded.materials[m.name].map;
});
}
scene.add(mesh);
}
render();
});
I'm creating a disc golf game for the browser. A friend of mine is assisting me by creating objects in Trimble Sketchup, so that I can import them into the game. He has exported a .dae file and the textures, and I have imported them using the ColladaLoader.js. The textures and object load, and the object is rendered, but the object is black, and, sometimes, the javascript console says some textures cannot be rendered.
Here is some code :
var loader = new THREE.ColladaLoader();
var dae;
loader.options.convertUpAxis = true;
loader.load( '/discgolf/static/models/BelmontDreamCourse.dae', function ( collada ) {
dae = collada.scene;
dae.scale.x = dae.scale.y = dae.scale.z = 2.0;
dae.position.set( 5, 5, 5 );
scene.add( dae );
} );
What else do I need to do? I will be happy to provide more information.
Without more information it's quite a quesswork, but I'd check three things first:
Make sure the texture path is correct (check Firebug Net panel or such for which path it's trying to load the textures). You might need to search & replace the texture path in the DAE, if I remember correctly SU can sometimes put absolute paths there.
Do you have lights in the scene? If I remember correctly, ColladaLoader converts the SU DAE materials to MeshPhongMaterial, which does need some lights to show up unlike MeshBasicMaterial.
Do you have an animation loop, so that the thing is constantly rendered? If not so, make sure that you re-render the scene not only after the model is loaded, but after the textures are loaded too (they are lazy loaded after the model).
Make sure to resize the texture files to power-of-two dimensions (256x512, 256x256,1024x1024 and so on). WebGL does not like arbitrarily sized textures.