gpt4 book ai didi

aframe - 在 aframe 中寻找一种在标记上渲染时通过触摸旋转和缩放模型的方法

转载 作者:行者123 更新时间:2023-12-05 04:06:09 31 4
gpt4 key购买 nike

我正在使用 aframe 0.8.2 加载此 Collada (DAE) 模型,并使用 aframe-ar 将其显示在 Hiro 标记上:

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='trackingMethod: best; debugUIEnabled: false;'>
<!--a-marker type='pattern' url='https://rawgit.com/germanviscuso/AR.js/master/data/data/patt.gafas'-->
<a-marker preset='hiro'>
<a-collada-model src="url(https://aframe.io/aframe/examples/showcase/shopping/man/man.dae)"></a-collada-model>
</a-marker>
<a-camera-static/>
</a-scene>
</body>

代码笔:https://codepen.io/germanviscuso/pen/KRMgwz

我想知道如何添加控件以通过在手机浏览器上使用滑动手势在其 Y 轴(相对于标记)上旋转它,以及如何在做捏手势时动态缩放模型。理想情况下,当我在我的笔记本电脑上进行测试时,如果它也可以与鼠标/触摸板一起使用,那就太好了,但在手机上触摸就足够了。

通用控件可以处理这个吗?我可以看到任何例子吗?这必须在模型相对于标记(AR 跟踪)动态渲染时起作用。

感谢任何帮助,谢谢!

最佳答案

我不会使用基于 raycastster 的“本地”控件。相反,我会使用任何 js 手势检测库。在这个例子中我使用了 hammer.js .

hammer.js 注册一个对象,该对象在检测到 panswipepinch 手势时发出事件。我在 a-frame 组件中创建了带有监听器的对象。

  1. 当检测到 pan 时,我只是根据方向旋转模型(2 - 左,4 - 右,8 - 上,16 - 下)

  2. 当检测到 pinch 时,我会根据事件值更改比例,您可以乘以任何因子。组件如下:

    AFRAME.registerComponent("foo",{初始化:函数(){var element = document.querySelector('body');this.marker = document.querySelector('a-marker')var model = document.querySelector('a-collada-model');var hammertime = new Hammer(元素);var pinch = new Hammer.Pinch();//识别器中默认不捏合hammertime.add(捏);//将其添加到管理器实例

       hammertime.on('pan', (ev) => {
    let rotation = model.getAttribute("rotation")
    switch(ev.direction) {
    case 2:
    rotation.y = rotation.y + 4
    break;
    case 4:
    rotation.y = rotation.y - 4
    break;
    case 8:
    rotation.x = rotation.x + 4
    break;
    case 16:
    rotation.x = rotation.x - 4
    break;
    default:
    break;
    }
    model.setAttribute("rotation", rotation)
    });

    hammertime.on("pinch", (ev) => {
    let scale = {x:ev.scale, y:ev.scale, z:ev.scale}
    model.setAttribute("scale", scale);
    });

    }});

工作故障 here .在我的示例中,我还检查标记是否可见,认为这可能很方便。

工作示例 here

关于aframe - 在 aframe 中寻找一种在标记上渲染时通过触摸旋转和缩放模型的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50197836/

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