Three.js响应式设计

这是three.js系列文章的第二篇。 第一篇是关于基础， 如果你还没有阅读第一篇那你应该从第一篇开始。

这篇文章是关于如何让你的three.js应用能适应任何情况。 让一个网页是响应式的通常是指让网页能在从桌面到平板再到手机 不同尺寸的显示器上显示良好。

对three.js来说有更多的情况要考虑。例如，在左侧、右侧、顶部或底部 具有控件的三维编辑器是我们可能需要处理的。文档中部的在线例子 是我们要处理的另一个例子。

上一个例子中我们使用了一个没有设置css和尺寸的canvas。

<canvas id="c"></canvas>

那个canvas默认300×150像素。

在web平台推荐使用css来设置物体的尺寸。

我们通过添加CSS来让canvas填充整个页面。

<style>html, body {   margin: 0;   height: 100%;}#c {   width: 100%;   height: 100%;   display: block;}</style>

HTML中的body默认有5个像素的margin值所以设置margin为0来移除margin值。 设置html和body的高度为100%让他们充满整个窗口。不然的话他们的大小只会 和填充他们的内容一样。

然后我们让id=c的元素的尺寸是容器的100%这里是body标签。

最后我们设置它的display为block。canvas的display默认为 inline。行内元素的末尾会有空格。 通过设置canvas为块级元素就能消除这个空格。

这里是结果。