three.js

用户7736347518648

2024-12-16 300 阅读2分钟

介绍

three.js，一个WebGL引擎，基于JavaScript，可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器。

使用场景

游戏开发
虚拟现实（VR）和增强现实（AR）
- VR体验：利用WebXR API与Three.js结合，开发沉浸式的VR应用。
- AR应用：通过ARKit或ARCore与Three.js集成，创建互动的AR体验。
数据可视化
- 3D图表和仪表盘：展示复杂的数据集，如3D柱状图、球形图等。
- 地理信息系统（GIS）：渲染地球或其他星球的3D模型，显示地理数据和地形特征。
网站设计和UI/UX
- 动态背景和特效：为网站添加吸引人的3D动画背景。
- 交互式界面元素：创建独特的导航菜单、按钮和其他UI组件。
建筑和室内设计
- 建筑可视化：展示建筑设计概念和施工进度。
- 室内设计模拟：帮助客户预览家具摆放和装修效果。

three.js 重要概念

开发一个Three.js的场景，需要如下一些元素：

scene 场景

一个容器，容纳着除渲染器以外的三维世界里的一切(模型，粒子，光源，相机等)。场景的元素采用右手笛卡尔坐标系，x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。
objects 物体

物体可以有很多种，比如原始的几何体，导入的模型，粒子，光源等。
renderer 渲染器

将camera在scene里看到的内容渲染/绘制到画布上。
light 灯光

3d引擎在没有手动创建光的情况下会默认有个环境光，不然你什么都看不到。常见的灯光有以下几种类型
- AmbientLight（环境光，没有方向全局打亮，不会产生明暗）
- DirectionLight（平行光，参考日光来理解）
- PointLight（点光源，参考灯泡来理解）
- SpotLight（聚光灯，参考舞台聚光灯）

camera 相机

就像人的眼睛，在一个空间里可以看向任意方向，可以通过参数调节可视角度和可视距离。

    PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
    //构造函数参数
    //fov：视场角(以度为单位表示，表示视觉角度的大小)
    //aspect：视场宽高比（一般用 画布宽/画布高即可）
    //near：能看多近
    //far：能看多远
    //这几个参数决定了哪些scene里的三维顶点会被渲染/绘制出来

相关文档