Embedding a three.js scene in a Ghost post

This is a quick experiment to see what a three.js scene looks like in a Ghost post. Libraries are loaded from a CDN following the approach from the official installation guide in the three.js docs.

<div id="three-container"></div>
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
    }
  }
</script>
<script type="module">
  import * as THREE from "three";

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, 400 / 300, 0.1, 1000);

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(400, 300);

  const container = document.getElementById("three-container");
  container.setAttribute("style", "width: 400px; height: 300px;");
  container.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 5;

  function animate() {
    requestAnimationFrame(animate);

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

    renderer.render(scene, camera);
  }
  animate();
</script>