Question

我想通过html5使用deviceorientation（alpha，beta，gamma数据）绘制3行。

<html>
<canvas id="mycanvas"></canvas>
<script>
window.addEventListener('deviceorientation', function(e) {draw(e.gamma, e.beta, e.alpha);}, false);

function draw(g,b,a)
{
  var gamma = Math.round(g);
  var beta = Math.round(b);
  var alpha = Math.round(a);

  var canvas = document.getElementById('mycanvas');
  var cx = canvas.getContext('2d');

  // how can i draw this 3 lines ?
}
</script>
</html>

以下是三个向量（行）的示例：

enter image description here

示范：[http://upload.wikimedia.org/wikipedia/commons/2/26/Gyroscope_wheel_animation.gif]

enter image description here

Answer 1

我想我得到了你的要求。以下是一些建议：

使用three.js，绘制轴。这是example。
使用DeviceOrientation附加您的three.js控件。 Three.js已经在THREE.DeviceOrientationControls中提供了这样的控制。这是example。
将您的THREE.PerspectiveCamera定位在可以看清所有轴的位置。

我知道这是一个老帖子，但希望它有所帮助。

绘制3行html5（alpha，beta，gamma via deviceorientation）

1 个答案: