3d terrain with Three.js

Examples
1

phaser and threejs
phaser and threejs1024×768 140 KB

3 Likes
2

I started from WebGL geometry terrain and examples/v3.85.0/game-objects/extern/view/threejs-cube.

I used three.js r149.

I removed all of THREE’s resizing and used only

renderer.setViewport(game.scale.width, game.scale.height);

Phaser is already scaling the game canvas and you want THREE to use the unscaled context size.

terrain
terrain256×256 114 KB

I used Phaser’s CanvasTexture in the terrain generation.

I removed THREE’s Clock and renderer.setAnimationLoop() and used instead

const view = this.add.extern();

view.preUpdate = function (time, delta) {
  controls.update(delta / 1000);
};

view.render = function () {
  renderer.resetState();
  renderer.render(scene, camera);
};

This works because Extern Game Objects have a preUpdate() method and are on the scene Update List, like Sprites.

The FirstPersonControls class could be converted to a Phaser class, using the scene’s input events for mouse and keyboard.

3 Likes