Question

<a-gltf-model id="nacl500" src="#bottle" scale="0.1 0.1 0.1" position="-0.27 1.410 -0.83" rotation="0 270 0" 
                bottleactivity__movetocamera="event:movetocamera" bottleactivity__rotatetobacksite="event:rotatetobacksite" bottleactivity__rotatetotopsite="event:rotatetotopsite"
                bottleactivity__movetodesk="event:movetodesk" bottleactivity__takeoffcap="event:takeoffcap" bottleactivity__hang="event:hang">
    <a-gltf-model src="#bottlewaterbottom"></a-gltf-model>
    <a-gltf-model id="bottlecap" src="#bottledecker" position="0 0.904 0"></a-gltf-model>
    <a-gltf-model src="#naci500"></a-gltf-model>
  </a-gltf-model>

init:function(){
var self=this;
var data= this.data;
var el=this.el;
//var $el=$("#nacl500");
var $el=$(el);
var status=0;

this.movetocamera=function(){
  //alert(data.message);
  //el.setAttribute("position", "0 1.054 -0.19");
  //alert($el.position);
  $el.animate({position:'0 1.054 -0.19'},"slow");
};

我想通过jquery添加动画到aframe。但它没有工作。警报（$ el）显示$ el是一个对象。 $ el.position是一些代码。 el.position未定义。

代码在这里：https://glitch.com/edit/#!/skill-lab

提前致谢！

Answer 1

JQuery Selectors返回一个数组，其中所有元素都符合选择器citeria。
因此，使用元素/ id选择器您需要将元素称为$el=$("cssSelector")[0];

像我在这里做的那样：https://jsfiddle.net/7q6dx45L/1/

<小时/> jquery animate()方法适用于CSS属性，因此不适用于动画webGL对象（位置，旋转，颜色）。
我建议使用<a-animation>或ngoKevins {{3 }}。
它们构建于aframe animation component（动画）和tween.js（组件）

如何在aframe中使用jquery

1 个答案: