我正在创建星空效果,当星星停止移动时,我需要它们发光。
我尝试使用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;
}
}
}