I have 2 different map cubes. After 10 seconds I want the first map cube to fade out and the second map cube to fade in. I was told to use keyFrameAnimation but the only examples I've seen are to make an object move or rotate. If anyone has any examples or a starting point for me..
Any help is greatly appreciated. Thanks!
Change the opacity on the 2 materials in the animation routine.
mesh2.material.opacity = newOpacity;
Be sure that transparent is set to true on the material.
Related
I have a MeshBasicMaterial which has a planegeomatry.the material is around the plane like an outline and will be green initially.i have a clock in the app.i need to reduce the length of the outline every seconds to alert user their time is running out.so the outline will flow from top of the plane clockwise fading and disappear when the time runs out.hope you get the idea.now can anyone help me how to achieve this.
One way to solve this: create a ring geometry and animate its property thetaLength using animejs or tweenjs.
Create a ring in a 3D app, that mapping coordinates that run down the length of the mesh. Then create a gradient texture, that is half black, half white, (1x256). Apply the texture to the material on the ring mesh. Animate the texture offset using animejs.
If you really want the best performance, create a procedural texture using glsl shader, and map that onto a plane.
I test threejs and I have this problem:
Please check this link
I do not understand why shapes placed in the background are visible through the foreground shape when zoom in and out. Do you have an idea?
It has to do with z-fighting https://en.wikipedia.org/wiki/Z-fighting
An easy fix for your case would be to change your "nearPlane" value from .1 to for example 2.
When I add to the scene two objects and set their transparency as true with some opacity and using TrackballControls I rotate the scene by mouse, the object which was initially further from camera loses its transparency.
I read that this is Z-buffer problem and further objects from camera will be displayed first. But when I rotate the scene using TrackballControls, camera changes its position, so transparent objects should be displayed correctly. But it is not like that.
Here in this picture - on the right is frontview, on the left is backview which is not displayed correctly:
http://www.foto-ondruskova.cz/Experiment/lenses.jpg
Please, any solutions?
I have come across this problem and setting alphaTest: 0.5 to the material as suggested here solved my problem. But it is hit and miss. Give it a try. Hopefully it works!
I am using the version THREE.js57. I want to hide selected face at run time. Is this possible in three.js
Thanks & Regards
Indeed this is possible, you'll want to look into the Raycaster library, here's the high level steps
unproject your mouse click coordinates into the 3D scene.
cast rays into your scene and return an intersected array of collided objects
this intersected object will have the affected face and faceIndex as parameters
on collision turn the face # faceIndex transparency to 0
Have a look at these doc pages:
http://threejs.org/docs/#Reference/Core/Projector
http://threejs.org/docs/#Reference/Core/Raycaster
And this example for a start:
https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes.html
Edit:
Alright, well to then hide the face you can have a peak at this other SO post:
Can I hide faces of a mesh in three.js?
The gist is you have a multimaterial object, the first material is your default, and a second material that's fully opaque. Then when you intersect you set the face to use the second materialIndex. Anyway, the above link should do the job. Off to up vote that response. :)
I have a quick question, may be someone will explain it to me.
The scene setup is show below. I have a sprite tree, a cube and a cubeCamera. Cube material has envMap set to cubeCamera.renderTarget. (CubeCamera is places where the cube is, and also i hide the cube before calling updateCubeMap method).
So, the question is why the sprite appears upside-down in the reflection?
This seems to happen only to sprites, other objects behave as expected.
In the actual project we manually flip sprites before updating cubeCamera, and it seems to work ok. But i want to actually know why is it so? Thanks!
UPD. Demo http://webgears.ru/public/wgdemos/spriteInEnvMap/