邂逅web开发之路, 三步扫除路径问题, 引入Three.js畅享3D世界

2023-10-19 23:56:57

克服路径障碍，畅享 Three.js 的 3D 世界

在 Web 开发中，引入外部资源（如 JS 模块）是常事。而路径指定是这个过程中至关重要的一步。路径分为两种类型：相对路径和绝对路径。相对路径相对于当前文件的位置来指定资源的位置，而绝对路径从根目录开始指定资源的位置。

LiveServer 的报错：相对路径的陷阱

当使用 LiveServer 作为开发环境时，如果引入的 JS 模块使用相对路径，可能会出现 "Uncaught TypeError: Failed to resolve module specifier "three".Relative references must start with either "/", "./", or "../"" 的报错。这是因为 LiveServer 无法解析相对路径，而需要使用绝对路径。

三步解决路径问题：引入 Three.js，畅享 3D 世界

第一步：书写正确的绝对路径

解决路径问题的最直接方法是正确书写绝对路径。绝对路径从根目录开始，以 "/" 开头。在 HTML 文档中，引入 Three.js 模块时，可以使用以下方式：

<script src="/three/build/three.min.js"></script>

第二步：配置构建工具（如 webpack 或 Rollup）

如果项目中使用了 webpack 或 Rollup 等构建工具，则需要配置这些工具来正确解析模块路径。具体配置方法可以参考构建工具的官方文档。

第三步：使用 CDN 引入 Three.js

如果不想配置构建工具，也可以使用 CDN 来引入 Three.js。CDN（Content Delivery Network）是一种分布式内容分发网络，可以快速、稳定地将内容分发给用户。在 HTML 文档中，可以使用以下方式通过 CDN 引入 Three.js：

<script src="https://unpkg.com/three@0.126.5/build/three.min.js"></script>

代码示例：使用 Three.js 创建一个立方体

<script src="https://unpkg.com/three@0.126.5/build/three.min.js"></script>
<script>
  // 创建场景
  const scene = new THREE.Scene();

  // 创建相机
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 2;

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  // 创建立方体
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);

  // 将立方体添加到场景中
  scene.add(cube);

  // 将场景和相机添加到渲染器中
  renderer.render(scene, camera);

  // 监听窗口大小改变事件，调整渲染器尺寸
  window.addEventListener('resize', function() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  });
</script>