World wrap with the main camera following the player

Phaser 3
1

Hi Guys,

In advance, I apologize for my bad english and if the topic already exists (maybe I am not using the right words to find my problem.)

What I want :

I want make an “infinite” map by using the world.wrap…That is to say : By example, when my player go though the right limit, the player was teleported to the left limit… (Like in the snake game). So the below code allow me to do that :

function update() 
{
    // ...

    // Do what I explained right above
    this.physics.world.wrap(this.objects, 0);
}

My problem :

I really want that the main camera follow the player, to make a big map (like in the game starblast.io). So if I add these following code, my issue is that when I’m approaching to the map limit, i did’nt see the objects to the others side.

function create()
{
    // ...
   
    // Main camera follow the player
    this.cameras.main.startFollow(this.player);
}

Any ideas to solve this issue ?
Thank you in advance for those who will take a little time to help me.

Below My Full Code / Phaser 3 
<html>
	<head>
		<title>Space</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="description" content="Demo project with jQuery">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
		<style type="text/css">
			html, body {
				height: 100%;
				margin: 0;
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<script src="./node_modules/phaser/dist/phaser.js"></script>
		<script type="text/javascript">
			const ratio = Math.max(window.innerWidth / window.innerHeight, window.innerHeight / window.innerWidth);
			const DEFAULT_HEIGHT = 720;
			const DEFAULT_WIDTH = ratio * DEFAULT_HEIGHT;

			// Game Objects
			var config = {
				
				type: Phaser.AUTO,
				backgroundColor: '#303030',
				physics: {
					default: 'arcade',
					arcade: {
						gravity: { y: 0 },
						debug: false
					}
				},
				scene: {
					preload: preload,
					create: create,
					update: update
				},
				scale: {
					mode: Phaser.Scale.FIT,
					autoCenter: Phaser.Scale.CENTER_BOTH,
					width: DEFAULT_WIDTH,
					height: DEFAULT_HEIGHT
				}
			};

			var game = new Phaser.Game(config);
			const _MAP_WIDTH = 1920,
				  _MAP_HEIGHT = 1080;	

			function preload()
			{
				this.load.image('bg1', 'assets/bg-stars-1.png');
				this.load.image('bg2', 'assets/bg-stars-2.png');
				this.load.image('hero', 'assets/square-blue.png');
			}

			function create ()
			{	
				var self = this;

				// We create the background
				this.add.tileSprite(_MAP_WIDTH / 2, _MAP_HEIGHT / 2, _MAP_WIDTH, _MAP_HEIGHT, 'bg1');
				this.add.tileSprite(_MAP_WIDTH / 2, _MAP_HEIGHT / 2, _MAP_WIDTH, _MAP_HEIGHT, 'bg2');

				// We create the particles, when the ship is moving
				var particles = this.add.particles('hero');
				this.emitter = particles.createEmitter({
					lifespan: 500,
					speed: { min: 400, max: 600 },
					angle: 0,
					gravityY: 100,
					scale: { start: 0.4, end: 0 },
					quantity: 2,
					blendMode: 'ADD'
				});
				this.emitter.stop();

				this.objects = this.physics.add.group();

				this.player = this.physics.add.image(100, 100, 'hero').setOrigin(0.5, 0.5);
				this.player.setDrag(100);
				this.player.setAngularDrag(100);
				this.player.setMaxVelocity(200);
				this.objects.add(this.player);

				this.physics.world.setBounds(0, 0, _MAP_WIDTH, _MAP_HEIGHT);

				this.cameras.main.startFollow(this.player);

				this.objects.add(this.physics.add.image(25, 25, 'hero').setTint(0xff0000));
				this.objects.add(this.physics.add.image(_MAP_WIDTH - 25, 25, 'hero').setTint(0x00ff00));
				this.objects.add(this.physics.add.image(_MAP_WIDTH - 25, _MAP_HEIGHT - 25, 'hero').setTint(0x0000ff));
				this.objects.add(this.physics.add.image(25, _MAP_HEIGHT - 25, 'hero').setTint(0xff00ff));

				this.cursors = this.input.keyboard.createCursorKeys();
			}

			function update()
			{	
				//console.log(this.player.angle);

				if(this.cursors.left.isDown) {
					this.player.setAngularVelocity(-150);
				} else if(this.cursors.right.isDown) {
					this.player.setAngularVelocity(150);
				} else {
					this.player.setAngularVelocity(0);
				}

				if(this.cursors.up.isDown) {
					this.physics.velocityFromRotation(this.player.rotation + 1.5, 200, this.player.body.acceleration);
					this.emitter.setAngle(this.player.angle - 90);
					this.emitter.emitParticleAt(this.player.x, this.player.y, 1);
				} else {
					this.player.setAcceleration(0);
				}

				this.physics.world.wrap(this.objects, 0);
			}
		</script>
	</body>
</html>
2

Just a little up, b’cuz I’m always stuck on it. Any tips ?

3 
function update() {
  // ...
  Phaser.Geom.Rectangle.CenterOn(this.physics.world.bounds, this.player);

  this.physics.world.wrap(this.objects, 0);
}