如何实现three.js在响应式设计中的实例详解？

本文共计3202个文字，预计阅读时间需要13分钟。

目录

1.Canvas 的响应式布局

- 示例：三维插画风

2.自适应设备分辨率

- 总结 - 源码地址：github.com/buglas/three

1. Canvas 的响应式布局 - Canvas 画布的尺寸有两种：像素尺寸和CSS尺寸 + 像素尺寸，即canvas的实际绘制区域大小 + CSS尺寸，即canvas元素在HTML中的显示大小

2. 自适应设备分辨率 - 总结 - 源码地址：github.com/buglas/three

目录

• 1-canvas 的响应式布局
• 示例：三维插图
• 2-自适应设备分辨率
• 总结

源码地址：github.com/buglas/thre…

1-canvas 的响应式布局

canvas 画布的尺寸有两种：

• 像素尺寸，即canvas画布在高度和宽度上有多少个像素，默认是300*150
• css 尺寸，即css 里的width和height

在web前端，dom元素的响应式布局一般是通过css 实现的。

而canvas 则并非如此，canvas 的响应式布局需要考虑其像素尺寸。