我想通过 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>
这是三个向量(线)的示例:
演示:[http://upload.wikimedia.org/wikipedia/commons/2/26/Gyroscope_wheel_animation.gif ]
最佳答案
我想我明白你的要求了。以下是一些建议:
- 使用 Three.js，绘制轴。这是一个example .
- 使用 DeviceOrientation 附加您的 Three.js 控件。 Three.js 已经在 THREE.DeviceOrientationControls 中提供了此类控制。这是一个example .
- 将您的 THREE.PerspectiveCamera 放置在您可以清楚地看到所有轴的位置。
我知道这是一篇旧帖子，但希望它有所帮助。
关于javascript - 绘制 3 行 html5(通过 deviceorientation 的 alpha、beta、gamma)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23200158/