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

本篇开始会记录我学习 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等存放静态文件的文件夹；

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

/* 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();

查看效果

呈现的效果应该是如下图所示，并且自动旋转

以上就是本篇的内容，有疑惑的地方可以评论留言，或者查阅three.js中文文档；下一篇将讲述位移、缩放和旋转，同时让大家理解 three.js 的父子层级关系。

这里是Matcha，坚持每天都输出文章&博客&观点，对本文章若有疑惑可以在评论区留言或者私聊我，我每天都会追踪最新消息和即使回复；目前我正在学习 three.js，后续会持续更新相关博客，期待你的点赞和关注。