最近看到了很多好看的3D网站呢，比如

_______________?_____：可以通过位移键操纵小车移动呢，非常有趣?。

所以上网搜了一下怎么做的呢，然后就看到一个非常不错的教程（Three.js之旅 — 使用 Three.js 学习 WebGL）。

然后B站也有中文字幕版本的呢，大家可以看看（【?【高质量中英双语字幕】? ThreeJS Journey ? | 英文原声 ?️ ?】 https://www.bilibili.com/video/BV13jU4YoErU/?share_source=copy_web&vd_source=fac6f9fc6ad59403bae7877047951d65）。

我也看这个教程学的，然后慢慢跟着这个视频学下去呢。

以下就是我学习《03 第一个Three.js项目》的学习笔记

1.下载node.js

介绍

Node.js 是让 JavaScript 在服务器端（本地电脑）运行的引擎，它使得 JavaScript 成为一门全栈语言（既能写前端也能写后端）。

npm（Node Package Manager） 是 Node.js 的包管理器，用来安装、管理和发布 JavaScript 模块（也叫“包”）。

安装node.js就是下载node.js和npm两个东西。

实操

搜索node.js中文网（下载 | Node.js 中文网），然后Windows用户点击红框下载.msi的文件格式，然后如果不换存储位置，安装包一直点击下一步就行了。

在cmd中输入

node -v

npm -v

如果显示了版本号就说明安装成功了。

2.项目创建（npm init -y）

实操

我用的vscode编辑器的，新建个文件夹然后用vscode打开，然后在vscode的当前文件夹下打开终端，然后输入

npm init -y

用来快速创建一个默认的 package.json 文件。

介绍

package.json 文件可以理解为项目的 “配置清单” 或 “身份证”，npm 就靠它来知道：

定义了哪些脚本命令；项目叫什么名字；版本是多少；作者是谁；项目依赖了哪些包（比如 vite、there 等）。

目的是为了方便你以后分享你的项目的，以后你或别人再下载项目时，只要执行：

npm install

npm 就能根据 package.json 一键安装所有依赖。

3.下载node.js

介绍

Vite 是一个由 Vue 作者尤雨溪（Evan You）开发的 前端构建工具，
主要用于快速启动、开发、和打包前端项目。

它可以用来创建：

• Vue 项目
• React 项目
• 甚至是纯 HTML + JS 项目

相当于比 webpack、parcel 等更快、更现代的替代方案。

实操

运行命令：

npm install vite

来安装vite，即从 npm 官方仓库 下载并安装一个叫 Vite 的包（构建工具），并放到你的项目中。你可以登陆npm的官网查看详细说明（vite – npm）。

npm 具体操作会执行以下几个动作 ?：

1. ? 从 npm 服务器上查找 vite 包
   • 到 npm 官方仓库
2. ? 下载该包及其依赖
   • 比如 Vite 依赖 esbuild、rollup 等；
3. ? 把包放入你的项目目录
   • 默认放在 node_modules/ 文件夹中；
4. ✍️ 更新 package.json 文件
   • 自动在 "dependencies" 中添加： "dependencies": { "vite": "^5.0.0" }
5. ? 生成或更新 package-lock.json
   • 精确记录每个依赖包的版本号，保证团队环境一致。

4.构建index.html文件

实操

新建一个index.html文件，然后！加回车键就能快速生成 HTML5 基本结构，因为这是VS Code 内置的 Emmet 功能。它是个强大的代码编写加速工具，它允许你使用类似 CSS 选择器的缩写语法，快速生成完整的 HTML 或 CSS 代码结构。

然后你可以改一下title的内容，然后加一行简单的文本行h1。

接下来在package.json文件中

将

"test": "echo \"Error: no test specified\" && exit 1"

删掉，换成

    "dev": "vite",

    "build": "vite build"

"test": "echo \"Error: no test specified\" && exit 1"它定义了一个 npm 脚本命令：当你运行 npm test 时，会打印一条错误信息，然后退出。

1️⃣"dev": "vite"意思是当你运行 npm run dev 时，npm 会执行命令 vite。即启动一个本地开发服务器，并自动监听文件变化，默认在浏览器打开地址（http://localhost:5173）。

2️⃣"build": "vite build"意思是当你运行 npm run build 时，会执行 vite build 命令。这个命令会把你的前端项目打包压缩；输出到一个叫 dist/ 的文件夹；文件都是可直接部署上线的静态资源（HTML、CSS、JS、图片等）。

5.下载和使用There.js

实操

新建个script.js文件，并在index.html中输入下列代码。

<script type="module" src="./script.js"></script>

然后在当前终端中输入：

npm install three

来下载There.js。

然后在script.js中输入：

import * as THREE from 'three'

//画布Canvas
const canvas = document.querySelector('canvas.webgl')

//场景Scene
const scene = new THREE.Scene()

//物体Object
const geometry = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({color: 0xff0000 })
const mesh = new THREE.Mesh(geometry,material)
scene.add(mesh)

//尺寸Sizes
const sizes = {
    width: 800,
    height: 600
}

//摄像机Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

//渲染器Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)

renderer.render(scene, camera)import * as THREE from 'three'

//画布Canvas
const canvas = document.querySelector('canvas.webgl')

//场景Scene
const scene = new THREE.Scene()

//物体Object
const geometry = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({color: 0xff0000 })
const mesh = new THREE.Mesh(geometry,material)
scene.add(mesh)

//尺寸Sizes
const sizes = {
    width: 800,
    height: 600
}

//摄像机Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

//渲染器Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)

renderer.render(scene, camera)

并将index.html中删除h1行，并添加<canvas class="webgl"></canvas>。

最终就可以在网页中看到一个红色立方体。