three.js - オブジェクトスティックをメッシュ面にドラッグします-部分的に機能します-子として追加しない限り... Three.js r60

Question

https://dl.dropboxusercontent.com/u/50584977/index2b.html

(three.js の例を jsfiddle で動作させることができないようです)

上記の例を見て、立方体の 1 つを球を横切ってドラッグすると、立方体は球に「くっつき」、面の法線に回転します。（球体の裏側で試してみない限り、まあまあです。）

問題：

https://dl.dropboxusercontent.com/u/50584977/index2.html

変更されたのは、マウスを離したときに、ドラッグした立方体を球体の「子」として追加したことだけです。立方体を球の上にドラッグして離し、同じ立方体をもう一度ドラッグしてみてください。何が起こるか見てみましょう。

シーンを回転させると悪化するようです。もう一度ドラッグしてみてください。

なぜそれをしているのですか？

Answer 1

1 つのオブジェクトを別のオブジェクトに追加すると、子のposition、rotation、およびscaleが親に対して相対的になります。したがって、球体を立方体に追加するときは、最初に球体の位置を調整する必要があります。概念的には、これを行う最も簡単な方法は、球体の位置から立方体の位置を差し引くことです。