I have a problem with three.js GLTFExporter.
I added a model with a transparent map to the scene.
model in three.js render
but if i use GLTFExporter to export this model, when i use GLTFLoader to load this model,
It doesn't look like what I showed you before（The transparency of the glass is lost.
The effect after export from GLTFExporter
What is known so far is that I used transparent maps for this model，when I export the model, the transparency effect disappears.
Could you please provide me with some solutions?
Thank you for your help. The reason for this problem is that after loading the .3ds model at the front end, I exported it as .gltf file. When loading the .gltf file again, part of the attribute values were lost, for example, alphaMap became null and .transparent became false, so the transparency effect failed.
So far I've solved this problem by modifying the .gltf attribute values:
Set the last item in the array below the GLTF file to 0.1, which represents the transparency of the object
materials.pbrMetallicRoughness.baseColorFactor = [1,1,1, 0.1]
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’m having a hard time getting an aoMap working in three.js…
I have a glb asset with an aoMap on the red channel or something. When I bring it into to the babylon viewer, I can see the ao just fine, but it wont show up in the three.js viewer or my project. I think this has something to do with a second set of uvs, but I can't find a resource that involves doing that on top of using the gltf loader… I really don't know what to do here. Any response would be greatly appreciated!
Here is my code (I’m using a html-canvas as the texture)
And I get the model’s geometry and diffuse texture (all white) as desired, but the aomap isnt showing…
code
babylon viewer
three.js viewer
working application with shadows included in diffuse
not working, diffuse is just white, and aoMap is not showing
You're right about needing a second set of UVs. The reason behind this is that diffuse textures often repeat (think of a brick wall, or checkered t-shirt). AO shading, however, is more likely to be unique on each part of the geometry, so it's almost never repetitive. Since this often would need an alternative UV mapping method, the default is to use a second set of UVs.
You could do 2 things:
Re-export your GLTF asset with a duplicate set of UVs.
Duplicate existing UVs in Three.js by creating a new BufferAttribute in your geometry:
// Get existing `uv` data array
const uv1Array = mesh.geometry.getAttribute("uv").array;
// Use this array to create new attribute named `uv2`
mesh.geometry.setAttribute( 'uv2', new THREE.BufferAttribute( uv1Array, 2 ) );
.getAttribute and .setAttribute are methods of BufferGeometry, if you want to read more about them.
I saw some discussions saying gltf does not export bumpmap but if I look into my exported gltf file (separate files mode) there is a bumpmap file with a bumpscale (and also normal map). After loading into three.js I get a meshstandard material with bumpmap object and scale value and also normalmap object. But they seem to have no effect on the rendered object. What is exactly allowed to do to export relief effect from Blender to Three.js with gltf ?
The only relief effect available in glTF is a tangent-space normal map, as shown here:
Blender does have the ability to convert height maps and other kinds of bump maps to tangent-space normal maps, by way of the "Bake" function in Cycles. There are also online utilities that can do this as well.
We have an issue with exporting our 3D Assets and animations correctly so that three.js can correctly display them.
All our 3D artists work with Cinema4D so we need to go through blender to export a three.js compatible JSON. They export the scene as FBX and then import it to blender. This seems to work fine. The model looks good there (with Material View set in Preview Window) and the simpler models we exported even worked with textures and animations.
But we now have a scene where, when we load the resulting JSON, some of the meshes are flipped 180° (but only some - the trees) and one of the models (Santa model) is not textured. They all look fine in blender.
When loading the JSON in https://threejs.org/editor/ you will immediately see the issues:
Is this an export problem? Can we fix it by tweaking the export params? Will we need to adjust the model in blender?
I would advise a couple things here:
File a bug on three.js including the .blend file
Try freezing transforms in Blender or C4D before export
Perhaps try a different three.js-compatible blender exporter, like glTF-Blender-Exporter.
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)