如何在不使用框架的情况下，通过 unpkg 引入 Three.js 并解决 main.js 中无法识别 THREE 的问题？-html教程-PHP中文网

如何在不使用框架的情况下，通过 unpkg 引入 Three.js 并解决 main.js 中无法识别 THREE 的问题？

花韻仙語

发布： 2024-11-09 09:18:24

原创

1035人浏览过

如何在不使用框架的情况下，通过 unpkg 引入 Three.js 并解决 main.js 中无法识别 THREE 的问题？

通过unpkg引入three.js的解决方案

问题描述：如何在不使用框架的情况下通过unpkg引入three.js？

相关代码：

<!-- index.html -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.155.0/build/three.module.js"
    }
  }
</script>
<script type="module">
  import * as THREE from 'three';
  console.log(THREE);
</script>

登录后复制

// main.js
console.log("Hello Three.js")
console.log("js" + THREE)
const scene = new THREE.Scene();

登录后复制

问题现象：

在main.js中无法识别THREE，报错："main.js:2 Uncaught ReferenceError: THREE is not defined at main.js:2:20"

解决方案：

有两种解决办法：

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

查看详情

方案一：

将main.js的类型改为module并直接在其中书写代码。

<!-- index.html -->
<script type="module">
  import * as THREE from 'three';
  console.log(THREE);
  console.log("Hello Three.js");
  console.log("js" + THREE);
  const scene = new THREE.Scene();
</script>

登录后复制

方案二：

将main.js中的代码移至index.html中，并将main.js的类型改为module。

<!-- index.html -->
<script type="module">
  import * as THREE from 'three';

  console.log("Hello Three.js");
  console.log("js" + THREE);
  const scene = new THREE.Scene();
</script>
<script type="module" src="./main.js"></script>

登录后复制

以上就是如何在不使用框架的情况下，通过 unpkg 引入 Three.js 并解决 main.js 中无法识别 THREE 的问题？的详细内容，更多请关注php中文网其它相关文章！