jqueryをフレームで使用する方法

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経由でアニメーションを追加したいと思います。しかし、それは働かない。 Alert（$ el）は、$ elがオブジェクトであることを示しています。 $ el.positionはいくつかのコードです。 el.positionは未定義です。

コードはここにある：事前にhttps://glitch.com/edit/#!/skill-lab

ありがとう！

Answer 1

JQueryセレクタは、すべての要素がセレクタciteriaを満たす配列を返します。したがって
、あなたは私がここで行ったよう$el=$("cssSelector")[0];

としての要素を参照する必要がある要素/ IDセレクタを使用して：https://jsfiddle.net/7q6dx45L/1/

---

jqueryの animate()方法は、CSSのプロパティで動作し、したがって、WebGLのオブジェクトをアニメーションでは動作しません（位置、回転、色）。
<a-animation>またはngoKevins aframe animation componentでビルドを使用することをお勧めします。
tween.js（a-animation）、 anime.js（コンポーネント）