我需要帮助来创建淡入淡出效果

时间:2019-04-25 20:15:58

标签: javascript three.js

我正在创建星空效果,当星星停止移动时,我需要它们发光。

我尝试使用TweenMax,但所有元素立即淡出。

我用来创建星星的代码是这样的:

function createStars() {


                groupStars = new THREE.Group();
                groupStars.position.x=0;
                groupStars.position.y=0;
                groupStars.position.z=0;

                var materialList = [];
                var boxGeo = new THREE.CircleGeometry(1, 50);
                for ( var i = 0; i < 1000; i ++ ) {
                    materialList.push (new THREE.MeshPhongMaterial({
                        color: new THREE.Color(0xFFFFFF),
                        specular: new THREE.Color(0xFFFFFF),
                        shininess: 10,
                        flatShading: THREE.FlatShading,
                        transparent: 1,
                        opacity: 1,
                        side: THREE.DoubleSide
                    }));
                    box = new THREE.Mesh(boxGeo, materialList[i]);
                    box.position.x = Math.random() * 1400 - 500;
                    box.position.y = Math.random() * 1400 - 1000;
                    box.position.z = Math.random();

                    groupStars.add( box );
                    stars.push(box);
                }

                scene.add( groupStars );
            }

当创建星星时,我将动画的这个函数称为:

function animateStars() {

  for(var i=0; i<stars.length; i++) {
    star = stars[i];
    var randomItem = stars[Math.floor(Math.random()*stars.length)];
    starWidth = star.scale.x;
    starHeight = star.scale.y;
    var k = 50;
    if( speed == false ) {
        star.position.z +=  i/20;
    } else {
        TweenMax.to(randomItem.scale, 2, {x: i*0.005, y: i*0.005, z: i*0.005, yoyo: true, repeat: -1});
    }

    if(star.position.z>1000){
        star.position.z-=2000;
    }

  }

}

使用此:

TweenMax.to(randomItem.scale, 2, {x: i*0.005, y: i*0.005, z: i*0.005, yoyo: true, repeat: -1});

我已经设法对元素产生了一些影响,但是并没有完全满足我的需求

我正在尝试获得以下信息: https://www.script-tutorials.com/demos/360/index.html

谢谢。

编辑

由于prisoner849发布的示例,我设法使其成功地将其添加到animateStars()函数中,我不知道这是否是最干净的方法,但是我真的很新在此:

function animateStars() {

                var time = Date.now() * 0.005;

                for(var i=0; i<stars.length; i++) {

                    star = stars[i];
                    var randomItem = stars[Math.floor(Math.random()*stars.length)];
                    starWidth = star.scale.x;
                    starHeight = star.scale.y;
                    var k = 50;
                    if( speed == false ) {
                        star.position.z +=  i/20;
                    } else {

                        star.scale.y = 0.6 * ( 1 + Math.sin( 0.6 * i - time ) );
                        star.scale.x = 0.6 * ( 1 + Math.sin( 0.6 * i - time ) );

                    }

                    if(star.position.z>1000){
                        star.position.z-=2000;
                    }

                }

            }

0 个答案:

没有答案