第一次接受threejs的实战,大受震惊。感觉有点神奇,和现实比较接近,所以研究记录下。
现实生活中我们看到的物品,我们需要环境、物体、光源、眼睛、物体材质,这样才能在现实生活中看到画面,那这些在threejs中是怎么实现?其实这些在threejs中都有对应的api去实现,这样才能看起来接近现实。下面学习下...
Threejs 的基本要素
- 场景 相当于现实生活中环境
const scene = new THREE.Scene();
- 相机 相当于现实生活中眼睛
相机用来确定位置、方向、角度,相机看到的内容就是我们最总在屏幕上看到的内容
threejs中相机有两种: 正交相机和透视相机(更接近于人眼看到的效果)
正交相机:远近一样大
![](https://i-blog.csdnimg.cn/blog_migrate/3622baf5335f06d48e887b776a75a8a9.png)
透视相机:近小远大
![](https://i-blog.csdnimg.cn/blog_migrate/1c17ad48d244a80302fea393216620dc.png)
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
- 灯光
光源,有了光才能看到画面
Ambient Light 环境光
Directional Light 方向光
Point Light 点光源(电灯泡)
Spot Light 聚光灯(手电筒、汽车灯