body {
      margin: 0;
    }

    canvas {
      width: 100%;
      height: 100%
    }

import * as THREE from "//cdn.skypack.dev/three@0.129?min";
import { OrbitControls } from "//cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls?min";
import { BufferGeometryUtils } from "//cdn.skypack.dev/three@0.129.0/examples/jsm/utils/BufferGeometryUtils?min";

var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
window.camera = camera;
camera.position.set(0, 3.4114688634409292e-15, 55.713514554827185);

var scene = new THREE.Scene();
window.scene = scene;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);
directionalLight.target.position.set(-1, -1.5, -2);
scene.add(directionalLight.target);

const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.1);
scene.add(directionalLight2);
directionalLight2.target.position.set(1, 1.5, 2);
scene.add(directionalLight2.target);

// https://stackoverflow.com/questions/31942722/how-to-merge-three-js-meshes-into-one-mesh/31944091
var blueMaterial = new THREE.MeshPhongMaterial({ color: 0x0000ff });
var redMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
var materials = [blueMaterial, redMaterial];

window.boxGeometry = new THREE.BoxGeometry(10, 10, 10);

window.sphereGeometry = new THREE.SphereGeometry(5, 16, 16);
sphereGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(15, 0, 0));

window.mergeGeometry = BufferGeometryUtils.mergeBufferGeometries(
  [boxGeometry,sphereGeometry],
  true
)

var mesh = new THREE.Mesh(mergeGeometry, materials);
scene.add(mesh);
window.mesh = mesh;

var controls = new OrbitControls(camera, renderer.domElement);

window.addEventListener("resize", onWindowResize, false);
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

var animate = function () {
  requestAnimationFrame(animate);

  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  // test

  renderer.render(scene, camera);
};

animate();