Stars: How would I create stars that 'wrap around the camera'

Questions
1

Hi folks, I have a space game. I have stars that are generated, but once you move off the screen they dissapear.

I generate thousands of tiny dots for stars, but now when I move really far away, they get less dense.

How do I recycle this properly?

image

From this

image

I need this at all times

image

2

Can you please describe in more detail how you generate the stars? With this in mind, it might be easier to provide feedback.

3

It depends on what is moving. Could be your ship or background. I think you have to reset the position of your stars. Maybe something like this in your render loop?

if (stars.position.x > outofBounds) {

    stars.position.x = startagainXpos;

}
1 Like
4

https://codepen.io/GraemeFulton/pen/BNyQMM

Found a good example! I changed the speed axis to X rather than Z.

Now I can put a player.X in there as well to consider. Bit tricky with the zoom level feature in my game but – this will work

5

AHH I have the question I need now:

How do I detect if a sprite of a star is NOT on the screen any longer?

6

Doing this with a single point cloud will produce a visible reset. If you are really going to repeat a point cloud, use two of them and change them in a circular manner.

7

One approach which can be easily implemented with JavaScript on the CPU: If you are working with THREE.Points, you have to verify if a single point lies within the view frustum of the camera. This test can be done with THREE.Frustum.

8

NICE, taking a crack at it now…

9

GOT IT. Looks great. More work to do this is very raw,

                // PLAYER SHIP
				// -----------
				player_ship = Posts.findOne({type:"ships", fleet_status:"selected", owner_id:Meteor.userId()});
				if(player_ship){

					var object_player_ship = scene.getObjectByName(player_ship._id);

						if(object_player_ship){
							camera.position.x = object_player_ship.position.x;
							camera.position.y = object_player_ship.position.y;
						}

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

							star = stars[i]; 
							star.position.z = camera.position.z - 1000;

							if(star.userData.setToPlayerPositionOnLoad == false){
								star.position.x = object_player_ship.position.x - Math.floor(Math.random() * 1000);
								star.position.y = object_player_ship.position.y + Math.floor(Math.random() * 1000); 	
								star.userData.setToPlayerPositionOnLoad = true;
							}

							if(star.position.x > object_player_ship.position.x + 1000){
								star.position.x = object_player_ship.position.x - 900;
								star.position.y = object_player_ship.position.y + Math.floor(Math.random() * 1000) + 1; 	
							} 
							if(star.position.x < object_player_ship.position.x - 1000){
								star.position.x = object_player_ship.position.x + 900;
								star.position.y = object_player_ship.position.y + Math.floor(Math.random() * 1000) + 1; 	
							} 


						}

				}