学习 Three.js (1) —— 入门 Three.js

本文链接：https://blog.youkuaiyun.com/weixin_52872413/article/details/134251327

本篇开始会记录我学习 three.js 的过程，并把我的想法见解通过文章的方式输出，用自己的言语去总结学习的内容。

构建 cli 和下载依赖

vite-cli

npm init vite@latest

首先，我使用的是 vite 去构建脚手架（用 vite 的好处dddd）然后下载对应的依赖

这里我们先使用原生去学习，学完了在某个框架中使用其实都是一样的，只需在你的框架中下载 three.js 的依赖即可

我用的是 js，如果想用 ts 来学习也可以，自由选择

下载依赖

npm install

构建完成

调整项目文件夹

接着我们调整一下项目文件夹，规范化代码工程

新建 src 文件夹，这个文件夹放置源码如 main.js；

更新 style.css 文件，做样式重置；

在public文件夹下添加css、image等存放静态文件的文件夹；

将一些多余的文件和代码删除；改动如下：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>

    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

/* style.css */
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

canvas {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;

  width: 100vw;
  height: 100vh;
}

下载依赖

接下来我们引入 three.js 依赖包

npm install three

three.js 的更新非常的快，技术团队对其维护效率非常高，这也是它之所以受欢迎的原因；但有一些语法上的变化要经常跟随文档去更新，所以学习过程中多看文档是一个良好的习惯，不管是学习哪门技术。

main.js

学习 three.js 的基本内容

我们先学习如何搭建一个场景、创建一个相机、创建渲染器、创造一个基本的立方体以及添加世界坐标辅助器，这些都是我们使用 three.js 做3d效果最基本的内容；代码如下：

// three.js
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

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

// 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 更新摄像机投影矩阵。在任何参数被改变以后必须被调用
camera.updateProjectionMatrix();

// 设置相机位置
camera.position.set(2, 2, 2);
// 相机视角
camera.lookAt(0, 0, 0);

scene.add(camera);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: "#fff" });
// 创建网格
const cube = new THREE.Mesh(geometry, material);

// 将网格添加到场景中
scene.add(cube);

// 添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 创建轨道控制器
const controls = new OrbitControls(camera, document.body);
// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数
controls.dampingFactor = 0.05;
// 设置旋转速度
controls.autoRotate = true;
controls.autoRotateSpeed = 10;

// 渲染函数
const animate = () => {
  controls.update();

  // 渲染场景
  renderer.render(scene, camera);
  requestAnimationFrame(animate);

  //   旋转
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
};

animate();