0
THREE.jsで既に動作していて、同じ機能をAフレームコンポーネントに追加したいと思っています。私はユーザーの画像入力ダイアログを持っており、画像が変わると以下のスクリプトが実行されます。問題は、このデータをコンポーネントにどのように渡すかです。スキーマは、ドキュメントとコンポーネントの内部からのconsole.log出力が異なるため、データを何とか変更するようです！コンポーネント内ユーザー入力からAフレームコンポーネントへのテクスチャマップの受け渡し
n {uuid: "6682DFA3-78C6-4BC6-9C5C-C2430A046D73", name: "", sourceFile: "", image: img, mipmaps: Array[0]…
：
HTML文書で
String {0: "e", 1: "m", 2: "p", 3: "t", 4: "y", 5: "T", 6: "e", 7: "x", 8: "t", 9: "u", 10: "r", 11: "e", uuid: "6682DFA3-78C6-4BC6-9C5C-C2430A046D73", name: "", sourceFile: "", image: img, mipmaps: Array[0]…
$("#userImage").change(function() {
var image = document.createElement('img');
var texture = new THREE.Texture(image);
image.onload = function() {
texture.needsUpdate = true;
// Helper is entity which has component with the shader
helper.setAttribute('myComponent', {
texture: texture
});
};
userImage = $("#userImage")[0];
if (userImage.files && userImage.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
image.src = e.target.result;
};
reader.readAsDataURL(userImage.files[0]);
}
});
VARテクスチャは、上記下VARテクスチャと同様のデータを返します。
var loader = new THREE.TextureLoader(manager);
var texture = loader.load('img/image.jpg');