webGL之three.js

2024-03-27

字数统计: 788字 | 阅读时长≈ 2分

threeJs文件包下载

文件资源目录介绍

three.js-文件包
└───build——three.js相关库，可以引入你的.html文件中。
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件，本地离线方式预览threejs文档
└───examples——大量的3D案例，是你平时开发参考学习的最佳资源
    │───jsm——threejs各种功能扩展库
└───src——Three.js引擎的源码，有兴趣可以阅读。
    │
└───editor——Three.js的可视化编辑器，可以编辑3D场景
    │───index.html——打开应用程序

工欲善其事，必先利其器——> 本地静态服务器开发环境

正式的web项目开发，往往会用webpack或vite或其它方式配置一个开发环境。如果只是学习threejs的话，没必要这么麻烦选择一个轻量级的应用打包工具就可以，比如Parcel 或者通过代码编辑器快速创建本地静态服务器，比如vsocde，安装live-server插件即可。

vscode配置`live-server`插件

不同代码编辑器创建本地静态服务器方式不同，课程就以vscode为了大家演示。

安装 - vscode软件界面左侧，点击扩展，输入live-server关键词查询安装。

使用 - 如果你想预览代码3D效果，打开对应.html文件，右键点击Open with Live Server即可。

我个人是选用了vite + vue3 搭建了一个本地web服务

创建3D场景三要素`场景Scene`、`相机Camera`、`渲染器Renderer`三个基本概念

物体形状：几何体Geometry

物体外观：材质Material

相机 Camera – 透视投影相机PerspectiveCamera

透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = 800; //宽度
const height = 500; //高度
// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
// 参数介绍 - PerspectiveCamera( fov, aspect, near, far )
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

参数	含义	默认值
fov	相机视锥体竖直方向视野角度	50
aspect	相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height	1
near	相机视锥体近裁截面相对相机距离	0.1
far	相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向	2000