Get started with jquery.threedubmedia CDN

$(document).ready(function() {
  // Include the required libraries
  $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.css">');
  $('head').append('<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>');
  $('head').append('<script src="https://cdn.cdnhub.io/jquery.threedubmedia/2.2/jquery.threedubmedia.min.js"></script>');
  $('head').append('<script src="https://cdn.cdnhub.io/jquery.threedubmedia/2.2/event.drop/jquery.event.drop.min.js"></script>');

  // Initialize the Three.js scene
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // Add a cube to the scene
  var geometry = new THREE.BoxGeometry(1, 1, 1);
  var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  var cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // Position the camera
  camera.position.z = 5;

  // Set up the renderer and animate
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();

  // Enable drag and drop functionality
  $('.container').drop(function(event, ui) {
    var file = ui.originalEvent.dataTransfer.files[0];
    var reader = new FileReader();

    reader.onload = function(event) {
      var arrayBuffer = event.target.result;
      var loader = new THREE.GLTFLoader();
      loader.load(event.target.result, function(gltf) {
        scene.add(gltf.scene);
      });
    };

    reader.readAsArrayBuffer(file);
  });
});