Im working on a project for my schoolwork and im having a problem with importing gltf file in three.js.
I make my gltf files with blender 2.9. So if i export gltf separate (+bin+textures) i can import a model with gltf loader but the problem is that textures that are meant to be transparent are not, even if i test the file on the online gltf loader they arent transparent. But if i export as embedded gltf everything works correctly on the online gltf viewer but in my project i get this error:
Uncaught (in promise)
error { target: img, isTrusted: true, srcElement: img, eventPhase: 0, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, timeStamp: 768, … }
Does anyone have any idea whats wrong? I spent hours now trying different stuff and im almost sure that my node setup in blender is correct as i read some forums and also official documntation on Blender.
Or maybe is there anything i can fix with separate exported gltf to make transparency working?
Thanks
try adding in renderer({alpha:true})
to add the posibility of transparentnes im not sure but it should work
please add your code to see if something else is wrong with code
Thanks everyone for your answers. I managed to fix the problem now with the separate gltf version by adding these two line to the renderer:
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
Then I was able to see through the texture but only things that were part of the same object in Blender everything else was white but then i figured out it was beacause this object was one of the first to be drawn thats why i guess it took canvas white color instead of the objects in the background.
Thanks again
Related
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]
recently updated a simple three.js scene from ~ r74 to r94. Textured materials are loading correctly but LineBasicMaterial is not showing. All references to materials are giving the error ".shading has been removed. Use the boolean .flatShading instead."
I can't find where .shading is being referenced. I'm just using three.js, not referencing any other three-related js files.
I found one thread saying to check the dependencies have been updated, but I don't know how to do this and assumed everything was just in the three.js file.
Does anyone have any ideas where .shading is being set please?
Many thanks.
LineBasicMaterial does not respond to lights, and never has.
LineBasicMaterial does not utilize the .flatShading property.
The .flatShading property is only used when rendering meshes.
three.js r.94
Having an issue using a JSON model w/ textures exported from Clara.io.
For those familiar with Clara.io, I'm using File -> Export All -> ThreeJS (JSON) to export and including the files in my ThreeJS project using the ObjectLoader example in the Clara.io docs:
var loader = new THREE.ObjectLoader();
loader.load("zebra.json",function ( obj ) {
scene.add( obj );
});
The mesh Geometry is loading fine, but with no texture.
Console is throwing error(s): 'Undefined texture null', yet the texture files are referenced in the JSON file.
Using ThreeJS r74.
How can I load the texture in three.js? The .json file references multiple textures.
I've reviewed #28723121 but a solution from that thread is unclear and I'd like to keep in-step w/ r74.
Any advice appreciated.
Got the example code working with a different model/texture combo not exported from Clara.io.
Not exactly 'the' answer I was looking for but its a solution for now. Doesn't appear to be a ThreeJS issue.
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)
http://www.diviniaro.com/WGClient/js/three.js/examples/webgl_loader_collada_Gate.html
After trying several things we're just left at a loss to get the exported animation from blender to load. I have noticed a few differences from the example "monster.dae" file in the collada loader. No matter what we've tried the animation just never seems to start.
Other opinions and a second set of knowledgeable eyes would be appreciated. The animations play fine in blender. There are 31 keyframes. There are also no errors on the console.
EDIT:
I think that this issue pertains to these issues with the three.js collada loader.
https://github.com/mrdoob/three.js/issues/2963