COBOLer & PHPerですが、必要上、Javascriptもゴリゴリ書く方です。
現在、ThreeJSに触れてます。PlaneやSphere(球体)の描画自体は問題無く動作しています。OrbitControlsでグリグリ回すのも大丈夫です。
一つ分からないのが、適当な座標にPlaneと球体を配置するのではなく、Planeの座標上ぴったりに球体を置きたいのですが、方法が分かりません。将来的には、plane.verticesで頂点を書き換えて傾斜を付けたいので、どの位置に球体を置いてもPlane上にぴったりくっつけたいのですが、試行錯誤してもどうしても球体が少し埋まったような見栄えになったり、潜った感じになったり浮いた感じになったりします。
ぴったり上に乗っている、Planeの傾斜に正しく沿っている、という状況がわかりづらいのですが、方法や確認方法をご存知の方はいらっしゃいませんでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
自己解決
結果的に、CANNON.JSと組み合わせて、いい具合に跳ねない位置にy値を合わせることで、何とかしました。
いまいち納得いかない感じではありますが。。
投稿2017/12/25 09:15
総合スコア368
0
球体ということですので、raycaster.intersectObject
が使えそうです。
https://threejs.org/docs/#api/core/Raycaster
このデモが近そうと思いますが、どうでしょう
https://threejs.org/examples/#webgl_interactive_raycasting_points
具体的なステップとしては、
1・傾斜したplaneの外側に、球を置く基準となる1点を用意する。球の中央の値でも可
2・その点から、planeの中心に対して、intersectObjectを実行。
3・返り値に対して球をセットする
var basePos = new THREE.Vector3(// 省略。球の中心地点とする); var planeCenter = new THREE.Vector3(// 省略。planeの中心地点とする。); var ballToPlane = basePos.clone().sub(planeCenter).normalize(); // 球の中心から板の中心に向かうベクトルを作成し、さらに正規化 var ray = new THREE.Raycaster(basePos, ballToPlane); // ボールの位置から板に向かうrayを作成 var hits = ray.intersectObject(plane); // rayとplaneとの衝突を検知 if(hits && hits.length > 0){ // 衝突点にそのままボールの中央をセットしてしまうとめりこむので、ボールの半径分外側に移動させる var addPos = ballToPlane.multiply(-1).multiply(ballRadius); // sphereを作ったときに使った半径があれば使いまわせます var ballPos = hits[0].point.clone().add(addPos); //衝突検出した値と、上のめりこみ防止用の値を足す ball.Pos.copy(ballPos); //sphereの位置にセットして終了 }
投稿2017/12/17 12:56
総合スコア203
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/17 14:21
2017/12/17 15:26 編集
2017/12/17 15:18
2017/12/17 15:27
2017/12/17 15:54 編集
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。