概述
我们采用下载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元/天 解锁文章
926

被折叠的 条评论
为什么被折叠?



