three.js基础环境搭建_vscode threejs插件

three.js介绍

three.js官网
Three.js是一款基于WebGL的JavaScript 3D库，它使得开发者能够使用JavaScript在Web浏览器中创建和展示高质量的3D图形和互动内容。以下是关于Three.js核心特点的详细介绍：
WebGL封装：Three.js封装了WebGL的底层API，提供了更高级别的抽象和更简洁的接口，使开发者无需直接操作复杂的图形渲染管线，即可实现高性能的3D渲染。
跨平台兼容性：Three.js支持在主流的桌面和移动浏览器上运行，具有良好的跨平台兼容性，能够确保开发的3D应用在各种设备上都能正常工作。
丰富的功能：Three.js提供了丰富的3D图形功能，包括支持3D模型加载、纹理贴图、光照和阴影、相机控制、物理模拟、粒子系统等。这些功能使得开发者能够轻松创建出逼真的3D场景和动画效果。
开源与社区支持：Three.js是一个开源项目，拥有庞大的开源社区和丰富的文档、示例以及第三方库。这些资源为开发者提供了强大的支持，使得学习和使用Three.js变得更加容易。

安装

使用 NPM 和构建工具进行安装。
对于大多数用户而已，从 npm 包注册表中心 安装并使用 构建工具 会是一个更推荐的方案。因为项目需要的依赖越多，就越有可能遇到静态托管无法轻易解决的问题。而使用构建工具，导入本地 JavaScript 文件和 npm 软件包将会是开箱即用的，无需导入映射（import maps）。

1. 安装 Node.js。我们需要它来管理依赖项和运行构建工具。
2. 在项目文件夹中通过 终端 安装 three.js 和构建工具 Vite。Vite 将在开发过程中使用，但不会被打包成为最终网页的一部分。当然，除了 Vite 你也可以使用其他支持导入 ES Modules 的现代构建工具。安装成功之后就会发现项目中多了一个node_modules文件夹和 package.json文件。
   node_modules：npm 将每个依赖项的代码放在 node_modules/ 下的文件夹中。当Vite构建应用程序时，它会看到 “three” 的导入，并自动从该文件夹中提取 three.js 文件。 node_modules/ 文件夹仅在开发过程中使用，不应上传到你的网络托管提供商或提交到版本历史记录中。
   package.json：npm 使用 package.json 来描述你已经安装的每个依赖项的版本。如果有其他人和你一起开发项目，他们只需运行 npm install 就能安装每个依赖项的原始版本。如果你在使用版本控制器（如：Git、SVN）来控制代码版本，那么 package.json 应当被提交。
3. 在终端运行：

npx vite

npx 与 Node.js 一同安装，可运行 Vite 等命令行程序，这样你就不必自己在 node_modules/ 中搜索正确的文件。如果你愿意，可以将 Vite 的常用命令 放入 package.json:scripts 列表，然后使用 npm run dev 代替。

如果一切顺利，你会在终端中看到一个类似 http://localhost:5173 的 URL，打开该 URL 就能看到你的网络应用程序。

threejs文件资源目录介绍

github链接查看所有版本threejs：https://github.com/mrdoob/three.js/releases
选择你需要的版本three.js文件包下载，然后解压，就可以预览里面的很多学习资源。
下载three.js文件包解压后，你可以看到如下目录(不同版本会略有差异)。

对于开发者而言，大家经常接触的是文档docs和案例examples两个文件夹，平时查看文档，可以打开文档docs里面html文件，案例examples里面提供了海量threejs功能案例。

three.js-文件包
└───build——three.js相关库，可以引入你的.html文件中。
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件，本地离线方式预览threejs文档
└───examples——大量的3D案例，是你平时开发参考学习的最佳资源
    │───jsm——threejs各种功能扩展库
└───src——Three.js引擎的源码，有兴趣可以阅读。
    │
└───editor——Three.js的可视化编辑器，可以编辑3D场景
    │───index.html——打开应用程序  
1
2
3
4
5
6
7
8
9
10
11

本地静态服务器

平时学习Three.js，如果你想预览代码3D效果，咱们需要提供一个本地静态服务器的开发环境，如果你有一定的web前端基础，提到本地静态服务器肯定不陌生。
作为前端工程师，大家都知道，正式的web项目开发，往往会用webpack或vite或其它方式配置一个开发环境。
如果只是学习threejs的话，没必要这么麻烦，我最建议的方式就是，通过代码编辑器快速创建本地静态服务器，比如vsocde，安装live-server插件即可。

vscode配置live-server插件

• 安装
  vscode软件界面左侧，点击扩展，输入live-server关键词查询安装。

• 使用
  如果你想预览代码3D效果，打开对应.html文件，右键点击Open with Live Server即可。

nodejs配置本地静态服务器

如果不用代码编辑器创建本地静服务器，也可以用nodejs配置。
首先确保你电脑已经安装nodejs，然后npm安装live-server插件，安装后，进入课件或threejs官方文件根目录，输入live-server命令即可预览3D案例。

// 安装live-server
npm install live-server -g
1
2

不过平时为了开发方便，可以不用nodejs创建一个本地静态服务器，可以借助你的代码编辑器更方便，比如下面要说到的vscode。

项目的开发环境引入threejs

比如你采用的是Vue + threejs或React + threejs技术栈，这很简单，threejs就是一个js库，直接通过npm命令行安装就行。
npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本)

// 比如安装148版本
npm install three@0.148.0 --save
1
2

• 引入three.js

import * as THREE from 'three';
1

基础知识

右手坐标系

右手坐标系中，x轴、y轴和z轴的正方向是通过以下方式规定的：将右手放在原点的位置，使大拇指、食指和中指互成直角。大拇指指向x轴的正方向，食指指向y轴的正方向时，中指所指的方向就是z轴的正方向。

程序结构