Razor Pages中使用Libman引入的Three.js遇语法错误求助

问题原因 #

你引入的Three.js（src目录下）和OrbitControls.js（jsm目录下）都是ES模块格式，这类文件包含import语句，但浏览器默认将普通<script>标签视为非模块脚本，因此会抛出Cannot use import statement outside a module错误。

两种解决方案 #

方案一：将脚本声明为ES模块（推荐进阶使用） #

直接在引入脚本的标签上添加type="module"属性，同时配置importmap解决模块路径映射问题：

1. 在_Layout.cshtml的<head>中添加importmap，告诉浏览器three模块的实际路径：

<script type="importmap">
  {
    "imports": {
      "three": "/lib/three/src/Three.js"
    }
  }
</script>

2. 修改原有的脚本引入标签，添加type="module"：

<script type="module" src="~/lib/three/src/Three.js"></script>
<script type="module" src="~/lib/three/examples/jsm/controls/OrbitControls.js"></script>

3. 页面中使用Three.js的脚本也需要声明为模块：

<script type="module">
  // 示例代码：创建基础场景
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  const geometry = new THREE.BoxGeometry();
  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>

方案二：使用UMD兼容版本（适合快速上手） #

Three.js提供了UMD格式的文件，无需模块配置，直接引入即可全局使用：

1. 通过Libman重新导入Three.js的UMD版本：

   • 选择three@0.160.1后，勾选build/three.min.js（核心库）和examples/js/controls/OrbitControls.js（UMD版本的控制器，注意是js目录而非jsm）

2. 在_Layout.cshtml中引入这两个文件：

<script src="~/lib/three/build/three.min.js"></script>
<script src="~/lib/three/examples/js/controls/OrbitControls.js"></script>

3. 页面中直接使用全局变量即可：

<script>
  // 示例代码和方案一一致，无需type="module"
  const scene = new THREE.Scene();
  // ...其余代码省略
</script>

内容的提问来源于stack exchange，提问作者user2833717