Three.js - Einen Torus zeichnen, aber die Gleichung nicht verstehen

Question

Ich versuche eine Animation zu machen, die eine Kugel darstellt, um die sich die Kamera dreht und auf der ich einen Kreis gezeichnet habe (gezeichnet mit THREE.TorusGeometry).

Dann projiziere ich ein Flugzeug auf den aktuellen Punkt, der durch die Richtung von der Kameraposition zum Ursprung (0,0,0) definiert ist.

Für einen Kreis, definiert durch y=0 und x²+z²=1 (dh ein Kreis definiert in Oxz Ebene = Äquatorebene der Kugel), können Sie sehen das Ergebnis auf:

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

Wie Sie sehen können, die Die Koordinaten der Ebene sind gut gezeichnet, aber ich verstehe nicht, warum der gelbe Kreis nicht in die Oxz-Ebene gezeichnet wird (in diesem Link sehen Sie, dass er in der Oxy-Ebene liegt).

Vor der Matrixmultiplikation, I oben definierte dem Vektor des Torus durch:

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

d.h, durch x'²+z'²=1 und y'=0 (Auswahl 2). In diesem Fall bekomme ich kein gültiges Ergebnis für den gelben Kreis, es wird wie erwartet in die Oxy-Ebene und nicht in die Oxz-Ebene gezogen.

Um ein gutes Ergebnis zu erhalten, muss ich x'²+y'²=1 und z'=0 in lokaler Ebene definieren, aber ich verstehe nicht warum?

Wenn mir jemand die Erklärung sagen könnte?

Answer 1

Es war schwer, aus dem ganzen Code, wo genau Ihr Problem war, zu extrahieren. Ich räumte die Dinge auf und löste es anders und ich denke this Fiddle zeigt, was Sie wollten.

/** 
* 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)); 

} 

Und dann habe ich Ihre Tangentialebene an die Kamera statt der Szene:

Anstatt alle Objekte von rotierenden ich nur die Kamera, die dann Ihre Lösung scheint viel einfacher gedreht So dreht es mit der Kamera.

camera.add(plane);