javascript - 从外部源加载三个Js？

Question

body { margin: 0; }
canvas { width: 60vw; height: 60vh; display: block; }

<canvas></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>



 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script>


<script>
  
  "use strict";

const  renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas")});

// There's no reason to set the aspect here because we're going
// to set it every frame anyway so we'll set it to 2 since 2
// is the the aspect for the canvas default size (300w/150h = 2)
const  camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
camera.position.z = 400;

const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(200, 200, 200);
const material = new THREE.MeshPhongMaterial({
  color: 0x555555,
  specular: 0xffffff,
  shininess: 50,
  shading: THREE.SmoothShading
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const light1 = new THREE.PointLight(0xff80C0, 2, 0);
light1.position.set(200, 100, 300);
scene.add(light1);

function resizeCanvasToDisplaySize() {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  if (canvas.width !== width ||canvas.height !== height) {
    // you must pass false here or three.js sadly fights the browser
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    // set render target sizes here
  }
}

function animate(time) {
  time *= 0.001;  // seconds

  resizeCanvasToDisplaySize();

  mesh.rotation.x = time * 0.5;
  mesh.rotation.y = time * 1;

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
  
</script>

我面临一个问题，我无法找到正确的解决方法：

我正在开发一个网站项目，我无法直接上传 .glb 或 .json 之类的任何文件并将它们加载到我的三个 js 代码中，因为我只通过 Magento 2 WYSIWYG 编辑器工作。在这里我只能添加一些 HTML、CSS、Java ......所以我被困在如何加载我使用 Blender 2.79 创建的对象上。

谁能指出我如何在这个项目中使用 Blender 创建的对象的正确方向？我对 Web 开发完全陌生，我不知道是否可以在我的服务器上的任何位置上传此类文件并在此之后加载它们或如何实现这一点。

提前谢谢大家，最好的问候马蒂亚斯

*到目前为止的代码：我只将一个立方体添加到容器中，我想加载一个搅拌器对象而不是那个立方体。

标签： javascriptmagentothree.jsblender