gpt4 book ai didi

javascript - 绘制 3 行 html5(通过 deviceorientation 的 alpha、beta、gamma)

转载 作者:行者123 更新时间:2023-11-28 08:19:13 25 4
gpt4 key购买 nike

我想通过 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

最佳答案

我想我明白你的要求了。以下是一些建议:

  1. 使用 Three.js,绘制轴。这是一个example .
  2. 使用 DeviceOrientation 附加您的 Three.js 控件。 Three.js 已经在 THREE.DeviceOrientationControls 中提供了此类控制。这是一个example .
  3. 将您的 THREE.PerspectiveCamera 放置在您可以清楚地看到所有轴的位置。

我知道这是一篇旧帖子,但希望它有所帮助。

关于javascript - 绘制 3 行 html5(通过 deviceorientation 的 alpha、beta、gamma),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23200158/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com