2017-03-03 2 views
0

Wie Standard-Zeichenposition von three.js (0,0,0) Zentrum der Leinwand zu tatsächlichen Leinwand Start verschieben?[Hilfe]: Three.js Koordinaten Übersetzung

Zum Beispiel hier: https://jsfiddle.net/data_x/mwprgnra/8/

Ich mag die Linien bewegen, von der gestrichelten Leinwand Box zu starten. (Verschiebung von 3d Koordinaten zu 2d Koordinatenposition). Ich brauche das, weil ich Svg-Leinwand über Webgl-Leinwand überlagern möchte. Dafür brauche ich beide, um denselben Koordinatenpositionen zu folgen.

Ein Teil des Codes:

camera = new THREE.OrthographicCamera(w/- 2, w/2, h/2, h/- 2, 1, 10000); 
    camera.position.set(0, 0, 100); 

Irgendwelche Hinweise/help sind,

Sie sehr geschätzt Danke,

+0

Sie müssen Ihre Daten von min, max actual auf skalieren min, max wird angezeigt – gaitat

+0

Ich habe versucht, mit (canvas.height/2 - 60) für den Rückgabewert der auskommentierten Bereichsfunktion in obigem cod zu multiplizieren Es wurde jedoch nichts außer der Achse wiedergegeben und die Achsengröße wurde merkwürdig verringert. Ist das, weil ich Perspektivenkamera für 2D-Zeichnung verwende? – user1

+0

Die Skalierungsberechnungen sind einfacher, wenn Sie eine orthographische Kamera (d. H. Lineare Algebra) verwenden. – gaitat

Antwort

0

Ich spielte ein wenig herum zu ändern:

OrthographicCamera (links, rechts, oben, unten, nahe, weit)

links - Kamera f Rostum linke Ebene. - auf 0 setzen

rechts - Kamera Kegelstumpf rechts. - auf Leinwandbreite einstellen

oben - Kamera-Kegelstumpf-Top-Ebene. - auf Leinwand Höhe

Boden - Kamera Kegelstumpf Bodenebene. - auf -400 (Sie brauchen diesen accirding auf Ihre Leinwand Breite zu ändern, Höhe

in der Nähe - Kamera Stumpfes in der Nähe von Flugzeug -. Auf 50

weit - Kamera Stumpfes weit Ebene -. Auf 100

Da links auf 0 gesetzt ist, wird es auf der linken Seite des Canvas gerendert, und wenn Sie den unteren Bereich entsprechend anpassen, werden Ihre Objekte an den oberen Rand der Canvas verschoben: