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

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

新規登録して質問してみよう
ただいま回答率
86.02%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

飛んでいる矢の角度を進行方向に合わせるには

honamin
honamin

総合スコア3

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1回答

0グッド

0クリップ

224閲覧

投稿2023/02/03 11:14

編集2023/02/04 03:23

実現したいこと

  • 弓矢を飛ばしたときに、矢のMeshの角度を推進方向に合わせたい

前提

Three.js でゲームを作っています。
オブジェクトを放物線を描いて飛ばせるところまで実現できましたが、矢のような棒状のMeshを飛ばすと、垂直に立った矢が飛んでいきます。

試したこと

飛んでいるオブジェクトのポジション(Vector3)を、毎フレーム保存して、前回の場所と比較して差分を出したり、角度を出したりしているのですが、それが必要な情報なのかと、正しいとして、一緒に飛んでいるMesh(棒状)の角度に反映させる方法・計算がわかりません。

検索して調べてるものの、Unityでは、meshに lookAt という関数があって、差分のベクトルを指定することで実現できる(meshの角度を飛んでる方向に合わせる)と読みましたが、Threeにはそのような関数がありません。

何か考え方のヒントなどありましたら教えていただけたらと思います。
よろしくお願いいたします。

追記:解決しましたので同じ質問んでこられた方へ

飛んでいる矢のvelocityをlookAtに指定すると実現できました。
lookAt関数を持っているのは geometry と Object3d になり、 geometry のlookAtは毎フレーム変更するような使い方ではないと document にありまして、その場合は Object3d(Mesh) の lookAt を使ってくださいとのことでしたのでした。

typescript

1 arrow.geometry.rotateX(Math.PI / 2) // 矢の形状が垂直だったので横にする 2 3 const normalVel = arrow.velocity.clone().normalize(); // 矢の velocity を正規化 4 normalVel.add(arrow.mesh.position); // 正規化した数値に矢の現在地を足す 5 arrow.mesh.lookAt(normalVel); // lookAtに指定

あれこれ複雑なことをしてましたが、たったこれだけでした...。
回答していただいた cx20 さん、ありがとうございます。おかげで実現できました。

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

公式サンプルに mesh の向きを変更するサンプルがありました。こちらが参考にならないでしょうか。
https://threejs.org/examples/#misc_lookat

投稿2023/02/03 21:05

cx20

総合スコア4538

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

honamin

2023/02/04 01:05

ありがとうございます!おかげで実現できました。 ありがちなことですが、わかってみると、とてもシンプルなコードでできました。
cx20

2023/02/04 01:38

解決されたようで何よりです。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。