Three.js系列 | 从入门到入门

🎯摘要

看完本文，你可能有如下收获：

• 构建一个three.js的入门demo
• 了解threejs基本概念

⭐️⭐️该收获仅供参考，真实收获以实物为准😇😇

🍭关于Threejs

Three.js 是一个 3D JavaScript 库，使开发人员能够快速创建 3D 应用。它在 WebGL 之上运行，该库的目标是极大地简化了3D场景的开发。比如如下效果：

threejs的运行需要4个条件：

• scene（场景）

场景就像是一个容器或者说世界，这容器中可以包含对象、模型、粒子、灯光等其他东西放入其中

• object（对象）

可以是几何体、模型、粒子、灯光等

• camera（相机）

在我们渲染场景时，我们所看到的的就是我们的相机角度，可以理解为现实生活中我们看世界的角度，眼睛即相机，在threejs中相机类似于一个锥体，受到视野范围和纵横比（画布的宽度/高度）的影响

near是视锥的前端、far是视锥的后端、fov定义了视野高度

• renderer（渲染器）

进行渲染，将我们的代码与设计渲染到我们的web中，这样就可以将代码设置的贴图纹理之类的效果用浏览器显示出来了

其他更多的说明建议查看官方文档

🍋实践

首先需要导入所需的依赖，可以通过三种方式：

• 下载three.js文件（本文使用的是源代码中build下的js文件）。
• npm
• CDN

然后逐一准备上述所需的四大要素（场景、对象、相机、渲染器）即可：

创建场景

const scene = new THREE.Scene();

创建相机

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1