質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1336閲覧

【JavaScript】aframeで動的にオブジェクトを生成する

da_

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/11/18 02:52

【やりたいこと】
aframeというwebVRのフレームワークを用いてwebVRの簡単なゲームを開発しています
github: https://github.com/arisaito/Tshirts1
できたところ: https://arisaito.github.io/Tshirts1/

このゲームはカーソルにオブジェクトを合わせると消せて、10個全部のオブジェクトを消すと最後に「ゲームクリア」の画像とTwitterなどのリンクが出現します。

【できないこと】
10個オブジェクトを消すとゲームクリア画像などの新たなオブジェクトを出現させることまではできました。
しかしこの最後のゲームクリア画像などは何故かカーソルが当たりません。

説明
↑通常であればカーソルはオブジェクトの上に被さるのですが…

説明
最後に生成するオブジェクトは、何故かカーソルが後ろになってしまっています。

当たり判定がされない、最初から生成しているオブジェクトと違いカーソルがそもそも当たらないという状況です。
そのためTwitterなどのリンクが貼りたくても貼れなくて困っています。

【現状のコード】
index.html:
https://github.com/arisaito/Tshirts1/blob/master/index.html

sub.js(動的にオブジェクトを生成するスクリプト):

/* number of target */ var objnum = 10; function clickHandler(e) { var me = document.getElementById(e.target.id); me.parentNode.removeChild(me); objnum--; if (objnum <= 0) { /* クリア画面を動的に生成する */ var scene = document.querySelector('a-scene'); var img = document.createElement('a-image'); var twitter_img = document.createElement('a-image'); var again_img = document.createElement('a-image'); var shop_img = document.createElement('a-image'); img.setAttribute('src', '#end_img'); img.setAttribute('rotation', '0 0 0'); img.setAttribute('scale', '4 2.260 4'); img.setAttribute('position', '0 4 -3'); scene.appendChild(img); again_img.setAttribute('src', '#again_img'); again_img.setAttribute('rotation', '0 0 0'); again_img.setAttribute('scale', '1.939 0.498 1.101'); again_img.setAttribute('position', '0 2.806 -2.954'); scene.appendChild(again_img); twitter_img.setAttribute('src', '#twitter_img') twitter_img.setAttribute('rotation', '0 0 0'); twitter_img.setAttribute('scale', '1 0.523 1'); twitter_img.setAttribute('position', '-0.546 2.152 -2.983'); scene.appendChild(twitter_img); shop_img.setAttribute('src', '#shop_img') shop_img.setAttribute('rotation', '0 0 0'); shop_img.setAttribute('scale', '1 0.523 1'); shop_img.setAttribute('position', '0.549 2.152 -2.983'); scene.appendChild(shop_img); } } function init() { /* クリックイベントハンドラの登録 */ var c = document.getElementsByClassName('obj'); for (i = 0; i < c.length; i++) { document.getElementById('obj' + i).addEventListener('click', clickHandler, false); } document.getElementById('end_img').addEventListener('click', endImgClickHandler, false); } function endImgClickHandler() { /* クリックイベントハンドラの登録 */ console.log("エンドイメジ、クリックされたよ") }

【試したこと】
・endImgClickHandler関数を設定してクリックされるかをテスト

function endImgClickHandler() { /* クリックイベントハンドラの登録 */ console.log("エンドイメジ、クリックされたよ") }

しかし実行されず

・そもそもplane(平面オブジェクト)にリンクが貼れないのではないか?
-> 最初から配置しているオブジェクト(八面体)をクリアのタイミングで同じように出してみたが結局カーソルが当たらない
状況変わらず

【教えていただきたいこと】
そもそも別の書き方の、動的にオブジェクトを生成する方法があれば教えていただきたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Github上のソースはだいぶ変えられているようなので外しているかもしれませんが、、、
質問に対して回答してみます。

しかしこの最後のゲームクリア画像などは何故かカーソルが当たりません。

カメラ(カーソル)に対してオブジェクトが近すぎるのではないでしょうか?
オブジェクトを多少離して配置してみてはどうでしょう?

そもそもplane(平面オブジェクト)にリンクが貼れないのではないか?

function init()内で、該当オブジェクトに対して「addEventListener('click', 〜」を設定していないように見えます。

そもそも別の書き方の、動的にオブジェクトを生成する方法があれば教えていただきたいです。

Javascript上でオブジェクトを作成する際は、私も同じように作成しています。
同じようなオブジェクトを複数作る場合は、a-mixinを使って一括設定を考えます。

投稿2019/01/15 10:27

YouichiSugii

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

da_

2019/01/15 15:15

Sugiiさん ご回答ありがとうございます! すみません、お察しいただいた通り、今回の「画像にカーソルが当たらない問題」は 3D空間上にメニューを配置するのではなくUIとしてしまうことで カーソルではなくクリック/タッチで操作する仕様に変更してしまいました。 (現状のURL: https://arisaito.github.io/VRT1/ ) しかし<a-mixin>で一括設定できるなど、 今後aframe/JavaScriptを触る上で大変参考になる回答がいただけ勉強になりました。 改めまして、丁寧にご教授いただきありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問