离线创建第一个threejs项目

最新推荐文章于 2025-07-29 14:00:18 发布

原创

最新推荐文章于 2025-07-29 14:00:18 发布 · 1.3k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #js

概述

我们采用下载threejs源码包的方式本地离线创建一个threejs项目。

本笔记对应的threejs版本为r172,由于threejs版本更迭较快，所以请采用指定版本。

知识储备

1.importmap类型脚本

在现代前端开发中，importmap 是一种用于管理 JavaScript 模块导入的新特性，它允许开发者在浏览器中直接映射模块的名称到具体的 URL，而无需依赖打包工具（如 Webpack 或 Rollup）。这对于使用 ES 模块（ESM）以及加载第三方库（比如 Three.js）非常有用，尤其是在原生浏览器环境中。

1.1 什么是importmap

importmap 是一种通过 <script type="importmap"> 标签定义的 JSON 对象，用于告诉浏览器如何解析 ES 模块的导入路径。它可以映射模块的名称（或路径）到实际的 URL。

基本语法如下:

<script type="importmap">
{
     
     
  "imports": {
     
     
    "模块名": "模块URL"
  }
}
</script>

模块名：你在代码中 import 时使用的名称（例如 three）。

模块URL：模块的具体地址，通常是一个 CDN 链接或本地文件路径。

1.2 实际案例

我们拿threejs官网的案例来举例

{
   
   
  "imports": {
   
   
    "three": "https://cdn.jsdelivr.net/npm/three@0.172.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/"
  }
}

“three”：映射 Three.js 的核心模块，指向 three.module.js，这是 ES 模块格式的核心文件。
“three/addons/”：映射 Three.js 的附加模块（如控制器、加载器等），这些模块位于 examples/jsm/ 目录下。通过这种方式，可以直接导入 OrbitControls 等模块。

在使用时我们需要配合type="module"的脚本，例如：

<!-- 使用 type="module" 的脚本 -->
<script type="module">
    // 导入 Three.js 核心模块
    import * as THREE from 'three';
    // 加载控制器（例如 OrbitControls）
    import {
     
      OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>

<script type="module"> 表明这是一个 ES 模块脚本，可以使用 import 语法。

源码下载

我们可以前往如下地址获取最新的threejs源码。

网页:https://threejs.org/

github地址:https://github.com/mrdoob/three.js/

1.网页获取

在这里插入图片描述

点击download获取源码压缩包，压缩包名为three.js-master.zip,与github最新发行版的内容一致。

注意事项:网页版下载的源码包时最新的发行版，如果要使用特定版本的threejs需要前往github下载。

2.github下载

访问github，从如下位置访问各发行版

在这里插入图片描述

您可以下载最新的发行版，也可以寻找特定版本下载，找到相应版本号，下载Assets中的压缩包，两个压缩包内容一致，只是压缩方式不同，根据自身系统选择一个即可。

在这里插入图片描述

源码使用

解压源码，得到如下结构:

在这里插入图片描述

解压得到build目录，我们需要使用的就是其中的three.module.js文件。

注意:three.module.js依赖three.core.js，所以至少要这两个文件。

当然也可以直接访问整个build目录。

html使用源码

我们先用importmap引入需要用到的源码，例如

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>第一个场景</title>
    <script type="importmap">
      {
     
     
        "imports": {
     
     
          "three": "../../build/three.module.js"
        }
      }
    </script>
  </head>

最低0.47元/天解锁文章