Commit dd2d7069 authored by 刘磊's avatar 刘磊

liuleicss3d分享

parent 49d22c32
Pipeline #18048 failed with stage
## Three.js常用的渲染引擎
1. WebGL
2. Css3DRender
3. canvasRenderer
4. SVGRenderer
## Three.js三大组件
场景-scene,相机-camera,渲染器-renderer
**1. scene(场景)**
场景是一个三维空间,是存放所有物品的容器,可以把场景想象成一个空房间,房间里面可以放置要呈现的物体、相机、光源等。
场景允许在什么地方、摆放什么东西来交给渲染器来进行渲染,场景也就是放置物体、灯光和相机的地方。
场景的构造函数是:
```
const scene = new THERR.Scene();
```
**2. camera(相机)**
在场景中需要添加一个相机,相机用来确定观察位置、方向、角度,相机看到的内容,就是我们最终在屏幕上看到的内容。在程序运行过程中,可以调整相机的位置、方向、角度。
**3. renderer(渲染器)**
渲染器的作用就是将相机拍摄出的画面在浏览器中呈现出来。渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以怎样的方式来绘制。
## Css3DRender
CSS3DRenderer用于通过CSS3的transform属性, 将层级的3D变换应用到DOM元素上。
![在这里插入图片描述](https://img-blog.csdnimg.cn/f214540830a34e1baf00d492d315abd0.png)
## 代码演示
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment