diff --git a/index.html b/index.html
index dfcf39c1..29a2707f 100644
--- a/index.html
+++ b/index.html
@@ -3296,6 +3296,9 @@
   <script defer src="modules/ui/3dpreview.js"></script>
   <script defer src="libs/quantize.min.js"></script>
   <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
-  <script defer src="libs/three.min.js"></script>
-  <script defer src="libs/orbitControls.min.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js" onerror="
+    var script = document.createElement('script');
+    script.src = 'libs/three.min.js';
+    document.body.appendChild(script);
+  "></script> -->
 </body>
diff --git a/modules/ui/3dpreview.js b/modules/ui/3dpreview.js
index 09670900..27dfb4eb 100644
--- a/modules/ui/3dpreview.js
+++ b/modules/ui/3dpreview.js
@@ -32,17 +32,47 @@ function render() {
   _3dpreviewRenderer.render(_3dpreviewScene, _3dpreviewCamera);
 }
 
-function start3dpreview(canvas) {
+async function start3dpreview(canvas) {
+  const loaded = await loadTHREE();
+  if (!loaded) {
+    tip("Cannot load 3d library", false, "error", 4000); 
+    return false;
+  };
   _3dpreviewScene = new THREE.Scene();
   _3dpreviewCamera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 0.1, 100000);
   _3dpreviewCamera.position.x = 0;
   _3dpreviewCamera.position.z = 350;
   _3dpreviewCamera.position.y = 285;
   _3dpreviewRenderer = new THREE.WebGLRenderer({canvas});
-  new THREE.OrbitControls(_3dpreviewCamera, _3dpreviewRenderer.domElement);
+  OrbitControls(_3dpreviewCamera, _3dpreviewRenderer.domElement);
   _3dpreviewRenderer.setSize(canvas.width, canvas.height);
   addMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY);
   _3danimationFrame = requestAnimationFrame(render);
+  return true;
+}
+
+function loadTHREE() {
+  if (window.THREE) return Promise.resolve(true);
+
+  return new Promise(resolve => {
+    const script = document.createElement('script');
+    script.src = "libs/three.min.js"
+    document.head.append(script);
+    script.onload = () => resolve(true);
+    script.onerror = () => resolve(false);
+  });
+}
+
+function OrbitControls(camera, domElement) {
+  if (THREE.OrbitControls) {
+    new THREE.OrbitControls(camera, domElement);
+    return;
+  }
+
+  const script = document.createElement('script');
+  script.src = "libs/orbitControls.min.js"
+  document.head.append(script);
+  script.onload = () => new THREE.OrbitControls(camera, domElement);
 }
 
 function update3dpreview(canvas) {
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index e113995e..c9c1d402 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -1194,7 +1194,7 @@ function editHeightmap() {
   }
 
   // 3D previewer
-  function toggleHeightmap3dView() {
+  async function toggleHeightmap3dView() {
     if (document.getElementById("_3dpreview")) {
       $("#_3dpreviewEditor").dialog("close");
       return;
@@ -1205,12 +1205,17 @@ function editHeightmap() {
     canvas.style.display = "block";
     canvas.width = parseFloat(_3dpreviewEditor.style.width) || graphWidth / 3;
     canvas.height = canvas.width / (graphWidth / graphHeight);
+    const started = await start3dpreview(canvas);
+    if (!started) return;
     document.getElementById("_3dpreviewEditor").appendChild(canvas);
-    start3dpreview(canvas);
+    canvas.onmouseenter = () => {
+      canvas.dataset.hovered ? tip("") : tip("Left mouse to change angle, middle mouse or mousewheel to zoom, right mouse to pan");
+      canvas.dataset.hovered = 1;
+    };
 
     $("#_3dpreviewEditor").dialog({
       title: "3D Preview", resizable: true,
-      position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"},
+      position: {my: "left bottom", at: "left+10 bottom-20", of: "svg"},
       resizeStop: resize3dpreview, close: close3dPreview
     });