現在インターフェイスを立体的に構築できないか考えています。
Three.jsを使って、ライブラリーを実際に作ってみようと試みています。
いくつかのイベントを用意して、ボックスを操作出来る様にしたいのですが、
ボタンを押すと起こるイベントの構造がわからなくて立ち往生しています。
実際にうごくオブジェクトはクリックすれば動くのですが、それをボタンで指定した場所に動かしたいです。
具体的には
0.ボタンで作ったジオメトリーを配置
0.そのジオメトリーをクリック
0.更に手前に引き寄せる
0.テキストの表示
0.目的達成
といった流れのサイトを考えています。
現状の問題
ボタンでのオブジェクトの再配置が出来ない。
クリックして動かしたオブジェクトが元の位置に戻らない
three.jsに詳しい方で、誰かお力添えをお願い出来ないでしょうか<(__)>
コードが長いのでこちらにリンクを貼ります。
テストアトラクション
浮いている白いボックスをクリックすると手前に来てボタンが表示されます。
その後、ボタンをクリックするとオーバーレイで要素を呼び出します
追記:three.jsとは別にTWEEN.jsを使っています。
カメラの視点移動はTrackballControlは使わずにイベントとして処理しています
あなたの回答
tips
プレビュー