Aframe webvrでタグを動的に追加するには

私は何をしたいのですか画像をクリックして、シーンに画像を動的に追加します。問題は、タグが追加されますが、私はそれにsrc属性を付けることができないということです。スキーマ：コンポーネント/システムundefinedのために未知のプロパティsrcを警告する私は、この警告Aframe webvrでタグを動的に追加するには

コアを取得します。

私がしたいことは、イメージをクリックするとイメージが動的に表示され、もう一度クリックすると破壊されるはずです。また、画像がフェードインのように挿入されたときにアニメーションを追加したいと思います。ここに私のコード

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="aframe.min.js"></script> 
    <title>Web VR</title> 
</head> 
<body> 
    <a-scene> 
     <a-assets> 
      <img id="sky" src="sky.jpg">  
     </a-assets> 
     <a-sky color="lightblue"></a-sky> 
     <a-image id="a" src="aboutus.jpg" position="0 1.25 -4"></a-image> 
     <a-camera position="0 0 3.8"> 
     <a-cursor id="cursor" color="red"> 
     </a-cursor> 
     </a-camera> 
    </a-scene> 

<script> 
var a=document.getElementById('a'); 
a.addEventListener('click',function(){ 
    var b=document. createElement('a-image'); 
    b.setAttribute('position','0 3.8 3.8'); 
    b.setAttribute('src','aboutus.jpg'); 
    a.appendChild(b); 
}); 
</script> 
</body> 
</html>

は誰かがアニメーション効果を追加する方法を私を見ることができれば、私も本当に感謝です。ちょうどwebvrを学んでいて、3日以来これを理解しようとしています。

出典

2016-11-04 New Programmer

。しかし、問題は今、私はそれを見ることができない取得です。コンソールでは、私はそれが既存のの下に追加されているかどうかを確認しますが、私は画像を見ることができません。 –

私は前に、この問題が発生し、解決策は2つあり：

あなたはwindow.loadイベント

の内側にあなたのA-シーンの操作コードをラップする必要がありますが、少しのフォーマットを調整する必要がありますあなたの.setAttribute（）呼び出し。私は、これはdocument.createElementNS（ ''、 'イメージ'）を使用して動作するようになった[OK]を

window.addEventListener("load", initAFrame); 

let addedImage; 

function initAFrame(){ 

    let a = document.getElementById("a"); 
    a.addEventListener("click", createDestroyImage.bind(true, a)); 

} 

function createDestroyImage(a){ 

    if(addedImage){ 
     a.removeChild(addedImage); 
     addedImage = null; 
    } else { 
     let b = document.createElement("a-image"); 
     b.setAttribute("position", { 
      "x" : 0, 
      "y" : 3.8, 
      "z" : 3.8 
     }); 
     a.appendChild(b); 
     addedImage = b; 
    } 
}

出典

2016-11-04 10:59:59 PookageHayes

ありがとう@PookageHayes。これは完全に機能しました。ちょうど私はこのような位置属性を変更しなければなりませんb.setAttribute（ 'position'、 '0 3.8 3.8'）;私は次のコードを含むようにコードを変更しており、完全に動作しています。 b.setAttribute（ 'position'、 '3 1.25 -4'）; b.setAttribute（ "src"、 "aboutus.jpg"）また、移動中にアニメーションを作成する方法はありますか？これは私にとって非常に役に立ちます。 –

そのためには、エンティティを調べる必要があります。何か問題があれば遊びに来てください！ https://aframe.io/docs/0.3.0/core/animations.html#sidebar elseステートメントの – PookageHayes

私は別の要素a-animationを追加し、次のプロパティを設定しました。 c.setAttribute（ "id"、 "a-ani"）; c.setAttribute（ "begin"、 ""）; c.setAttribute（ "easing"、 "ease-in"）; c.setAttribute（ "属性"、 "スケール"）; c.setAttribute（ "from"、 "0 0 0"）; c.setAttribute（ "to"、 "2 2 2"）; c.setAttribute（ "dur"、 "1000"）;私はそれをa-imageに子として追加しました。これは、画像がclick.Iで作成されたときにうまく動作し、存在感がズームしているように見えます。しかし、イメージを削除している間、つまり、再び逆の効果を得ることはできません。 –

Aframe webvrでタグを動的に追加するには

答えて

関連する問題