<library_images>
<image id="ID9">
<init_from>
./textures/Seats_Lvl2b_2k.jpg
</init_from>
</image>
In the default skinning example for Collada via ThreeJS website I see that this should hold my images and then the for loop would print them out however they do not show the textures from my .dae file and it results in my DAE file loading in the browser but no textures applied.
skin = collada.skins[ 0 ];
If I print out:
skin = collada.dae['images'];
The log shows:
Other warnings in the log are:
THREE.MeshPhongMaterial: 'diffuse' is not a property of this material.
11: ColladaLoader.js:3020 unhandled Sampler2D prop: instance_image
three.min.js:381 THREE.MeshPhongMaterial: 'diffuse' is not a property of this material.
All images are placed relative on the server.
Advice welcome
If you can share the COLLADA model you can get more specific advice, but without that I'd recommend converting to FBX or glTF and using FBXLoader or glTFLoader, respectively.
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]
I bought a tshirt 3d model in the format .fbx. I'm using this tutorial to get started with three.js: https://tympanus.net/codrops/2019/09/17/how-to-build-a-color-customizer-app-for-a-3d-model-with-three-js/
I exported the .fbx model in blender to a .glb file. This .glb file is used in my three.js website. On the website parts of the tshirt are blurred, some parts look like they should. Here is a comparison image with the blender model (dark) and the blurred three.js model (light): https://imgur.com/a/0EhczQg
What can I do? Do I have to change something in blender prior to the export or do I have to change the three.js code from the tutorial?
As Mugen87 stated, the solution was to set receiveShadow and castShadow to false.
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 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.