Integrate three.js inside phaser.js

by yandeu

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.21.0/phaser.min.js"></script>

JavaScript

var config = {
      width: 800,
      height: 600,
      type: Phaser.WEBGL,
      parent: 'phaser-example',
      backgroundColor: '#2d2d88',
      scene: {
        create: create,
        update: update
      }
    };

    var camera;
    var scene;
    var mesh;
    var renderer;
    var objects = [];
    var rotation = 1
    var game = new Phaser.Game(config);

    function create() {
      var e = this.add.extern();

      camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
      camera.position.z = 5;
      scene = new THREE.Scene();


      var light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
      var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
      scene.add(light);
      scene.add(directionalLight);


      renderer = new THREE.WebGLRenderer({ canvas: this.game.canvas, context: this.game.context, antialias: true });
      e.render = function (prenderer, pcamera, pcalcMatrix) {
        renderer.state.reset();
        renderer.render(scene, camera);
      }
      renderer.autoClear = false;

      for (let i = -2; i <= 2; i += 2) {
        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshStandardMaterial({ color: Math.random() * 0xffff });
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.setX(i)
        objects.push(mesh)
        scene.add(mesh);
      }
    }

    function update() {
     	// rotate the boxes
      objects.forEach((obj) => {
        obj.rotation.x += 0.005;
        obj.rotation.y += 0.01;
      })

      // move camera around
      rotation += 0.02;
      camera.position.x = Math.sin(rotation) * 10;
      camera.lookAt(0, 0, 0);

      renderer.render(scene, camera);
    }