Three.js - トーラスを描きましたが、定義されている方程式を理解できません

Question

カメラが回転している円を表すアニメーションを試してみました。円を描いています（THREE.TorusGeometryで描画）。

次に、カメラ位置から原点(0,0,0)の方向で定義された現在の点に平面を投影します。 y=0とx²+z²=1によって定義される円の場合

（すなわち、球のOXZ面=赤道面に定義される円）、あなたは上の結果を見ることができます：あなたが見ることができるように

link 1 : circle defined by y=0 and x²+z²=1

は、平面の座標はよく描かれていますが、なぜ黄色の円がOxz平面に描かれていないのか理解できません（このリンクでは、それはOxy平面にあることがわかります）。

行列乗算の前に、私はによってトーラスのベクター上で定義された：x'²+z'²=1とy'=0（選択肢2）によって、

var coordTorus = new THREE.Vector3(radius*Math.cos(timer), 0, radius*Math.sin(timer)); 

すなわち。この場合、黄色の円に対して有効な結果は得られません.Oxy平面に描画され、期待どおりOxz平面に描画されません。

良い結果を得るには、x'²+y'²=1とz'=0をローカルプレーンに定義する必要がありますが、その理由を理解できませんか？

誰かが私に説明を教えてもらえますか？

Answer 1

問題がどこにあるのかをすべてのコードから抽出するのは難しかったです。私は物事をきれいにし、それを別の方法で解決したと思う。this Fiddleはあなたが望むものを示していると思う。

の代わりに、私はあなたのソリューションその後、はるかに簡単なようだのみカメラ回転しているすべてのオブジェクトの回転：

/** 
* Rotate camera 
*/ 
function rotateCamera() { 

    // For camera rotation 
    stepSize += 0.002; 

    alpha = 2 * Math.PI * stepSize; 

    if (alpha > 2 * Math.PI) { 
     stepSize = 0; 
    } 

    // Rotate camera around a circle 
    camera.position.x = center.x + distance * Math.cos(alpha); 
    camera.position.z = center.y + distance * Math.sin(alpha); 

    // Camera should look at center 
    camera.lookAt(new THREE.Vector3(0, 0, 0)); 

} 

をそして私が代わりにシーンのカメラにあなたの接平面を追加しました： だから、回転をカメラで。

camera.add(plane);