How can I render a fade in animation for an object in Three.js?

Question

I'm new to Three.js and want to add a fade in animation for adding a new mesh geometry into the scene. make the material's opacity to change from 0 to 1 after adding it. How do I do that?

I tried to define opacity outside the function under GUI button, and seems the update animation is not working

var opa = 0;

var MyUpdateLoop(){

requestAnimationFrame(MyUpdateLoop);

renderer.render(camera, scene);


//here is the problem

opa += 0.1;

}

function buildGui(){

    gui = new dat.GUI();

    var obj = {
        addBox: function(){
           var geometry= new THREE.BoxGeometry(20, height, 20);
           var material= new THREE.MeshPhongMaterial( {transparent:true, 
           opacity: opa} );
           var mesh = new THREE.Mesh(geometry, material);
           scene.add(mesh);
        }
    }

    gui.add(obj, 'addBox');
}

I expect the opacity can from 0 to 1 by 1 second, but it actually was 0.3 at the first click and 1 at the second click.

soju · Accepted Answer · 2019-06-03 12:09:41Z

3

You need to update object's material opacity.

One easy way to do this is to use a tween lib, here is an example with TweenMax from GSAP

var geometry= new THREE.BoxGeometry(20, height, 20);
var material= new THREE.MeshPhongMaterial({ transparent: true, opacity: 0 });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
TweenMax.to(material, 1, { opacity: 1 });

answered Jun 3, 2019 at 12:09

soju

25.4k3 gold badges70 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I render a fade in animation for an object in Three.js?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related