2.2 KiB
2.2 KiB
| nav | group | ||||||||
|---|---|---|---|---|---|---|---|---|---|
|
|
基础
介绍
:::info{title=记录日志} 本文档从 2023 年 10 月 20 开始，主要用来记录 threejs 的学习过程和踩坑记录，方便复盘与总结。 :::
基本对象
一个基本的 3D 场景需要包括的以下几个必备要素：
- 场景：scence
- 相机：camera（实例 THREE.PerspectiveCamera(fov, aspect, zNear, zFar)）
- 渲染器：renderer
绘制方法
基本的场景搭建好了，现在我们需要在这个场景中放置我们想要的对象，一般我们想要的基本几何体可以通过以下方式创建：
- Geomety（几何体，常用）
- Materials（材质）
- Mesh（网格对象）
大致思路为：创建一个几何体，给几何体附加材质，组合之后加入场景中，如下所示
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
其它
如果想要让场景更加精美，我们需要添加更多的参数来达到想要的效果
- 纹理（Textures）
- 光照（Lights）
- 变换（Transforms）
- 矩阵（Matrices）
- 视窗（Viewports）
- 着色器（Shader）
- 群组（Group）
社区
pixiJS
一款基于 webGL 的 2d 渲染引擎，用来写一些 bit 游戏还是挺好用的。
threeJs
目前比较热门的基于 webgl 的框架，缺点是每个版本之间的接口差异较大，所以使用的时候需要根据版本来找对应的接口文档
本文会更多的以 threejs 为基础框架来展开深入构建一个 3Dweb 世界