【01】基于 Three.js 的 WebGL 动画代码解析（webgl_animation_keyframes.html)

在本文中，我们将深入解析一段使用 Three.js 实现 WebGL 动画相关功能的代码。这段代码涵盖了从场景搭建、模型加载到动画控制以及页面响应式处理等多个方面的内容，下面让我们逐步来看。

一、HTML 结构部分

（一）页面容器

首先映入眼帘的是 HTML 部分的两个 <div> 元素：

<div id="container"></div>

<div id="info">

<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - keyframes<br/>

Model: <a href="https://artstation.com/artwork/1AGwX" target="_blank" rel="noopener">Littlest Tokyo</a> by

<a href="https://artstation.com/glenatron" target="_blank" rel="noopener">Glen Fox</a>, CC Attribution.

</div>

• <div id="container"></div>：这个 div 元素将作为后续 Three.js 渲染器（WebGLRenderer）渲染内容的容器，我们会把渲染出的 3D 场景等相关元素添加到这个 div 中，使其能够在网页上展示出来。

• <div id="info">：它主要用来展示一些相关的信息，比如链接到 Three.js 官方网站的超链接以及模型相关的版权、来源等信息，通过 <a> 标签实现了外部链接跳转，方便用户了解更多背景知识。

（二）模块导入映射配置

接着是一段 script 标签内的 importmap 配置：

<script type="importmap">

{

"imports": {

"three": "../build/three.module.js",

"three/addons/": "./jsm/"

}

}

</script>

这个 importmap 是用于指定模块导入路径的映射关系。在这里它告诉浏览器，当导入 three 模块时，实际对应的文件路径是 ../build/three.module.js，而对于以 three/addons/ 开头的模块导入路径，对应的实际路径是 ./jsm/。这样方便在后续的 JavaScript 代码中准确引入 Three.js 及其相关插件模块，使得代码的模块导入更加清晰和易于管理。

二、JavaScript 代码主体部分

（一）模块导入

<script type="module"