I import a animated gltf 2.0 model in a A-Frame scene.
I want to set its opacity to 0.5. But it doen't work, even I try to modify the value with object3D class.
Hier is the demo project on glitch:
https://glitch.com/edit/#!/animated-gltf-opacity
Thanks for any help.
You need to wait until the model is loaded, throw Your code to an event listener:
this.el.addEventListener("model-loaded", (e)=>{//change opacity})
Check it out here.
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]
When importing a gltf object into an a-frame scene I'd like to set an equirectangular environment map for that object to influence its reflections. I'd like to use the same img DOM id reference as I used in the sky entity. How can I do that?
For example, I'd like to be able to specify code such as this:
<a-entity gltf-model="#model-file" env-map="#sky"> </a-entity>
I found a cubemap version of this by #donmccurdy but looking for equirectangular instead and also a mechanism to use an already loaded image texture.
https://github.com/donmccurdy/aframe-extras/tree/master/src/misc#cube-env-map
See this answer:
Aframe gltf-model demo with envmap
Another option for the future, investigate scene.environment threejs which may apply the same environment map automatically to all objects with supported materials.
I have a PLY model that comes with all of its color information in the file, so I'm using {vertexColors: THREE.VertexColors} when I define its MeshBasicMaterial to pull these colors in. This all renders nicely.
I'd like to be able to raycast to the surface and update a face's color when the mouse is over it. I have no problems getting the face information from the ray intersects, and when I try updating the face's color using a model that's not defined by its vertexColors, everything works as it should. When I try it with any model that is defined this way, though, it never updates the selected face.
Any ideas on what's causing this or how to resolve it? Is there a way to override the color information that's set by THREE.VertexColors in order to highlight a face?
Thanks in advance.
I'm viewing a scene using threejs and the trackball camera. I try to get the view matrix from the camera, but its matrixworldinverse isn't updating. I do call updateMatrixWorld in my render function. The matrixworld is updating, just not the inverse. Any ideas why?
You need to do it yourself:
camera.matrixWorldInverse.getInverse( camera.matrixWorld );
Make sure camera.matrixWorld is updated first. Note that by default, it is automatically updated by the renderer.
three.js r.58
How make an Update function in Three.js, like in Unity3d?
I mean, that i create an object:
var torus = new THREE.Mesh(
new THREE.TorusKnotGeometry(60,20,100),
reflectionMaterial
);
and when i click on the body, i change a reflectionMaterial. But the image don't change, i see a not changed reflectionMaterial (last figure). Always redrawing a render image???
Thank's for attention. Sorry for my English (I'm from Ukrainian).
P.S.: I work with Three.js onn my netbook and on (not my) notebook. On netbook i don't see a shaders. Why?? Did the Three.js support Shader Model number 3 and 0?
If I understand your question, you are having issues changing a material after you click on something? You may need to change a flag depending on if you already have a material or not, there are some dependencies - check the link below:
material.needsUpdate = true;
There is an article on How to update things in Three.js