Préface
Three.js est une bibliothèque 3DJS, l'un des plus excellents frameworks open source WebGL. En plus de WebGL, Three.js fournit également un rendu basé sur la toile et les balises SVG. Il est recommandé d'utiliser Chrome ou Firefox pour le débogage.
1. Caméra
La caméra des graphiques définit comment l'espace tridimensionnel vers des écrans bidimensionnels est projeté.
Pour les méthodes de projection, les caméras sont divisées en caméras de projection orthogonales et des caméras de projection en perspective.
2. La différence et la portée de l'application des deux caméras
Projection orthogonale:
Projection en perspective:
La projection orthogonale est comme une photo dans la classe de mathématiques; Bien que la projection en perspective ait un point de base, c'est-à-dire que les objets au loin sont plus petits que les objets à proximité, et sont plus grands et plus petits à proximité.
Pour les logiciels de dessin et de modélisation, la projection orthogonale est généralement utilisée; Pour la plupart des autres applications, la projection en perspective est généralement utilisée.
3. Caméra de projection orthogonale
Le constructeur d'une caméra de projection orthogonale:
Trois.othographicaMamera (gauche, droite, haut, bas, près, loin)
Les six paramètres représentent les positions des six faces capturées par la caméra de projection orthogonale.
Parmi eux, près de la distance verticale entre le plan proche et le point central de la caméra ; Far représente la distance verticale entre le plan lointain et le point central de la caméra .
Pour maintenir le rapport horizontal et vertical de la caméra , le rapport de (droite-gauche) à (haut-fond) doit être cohérent avec le rapport d'aspect de la toile.
Comme on peut le voir sur la figure, les valeurs de près et de loin devraient être positives et loin . Si les deux dernières valeurs sont (0, 0), c'est-à-dire que les valeurs proches et éloignées sont les mêmes, la profondeur du corps de vision a disparu et tout le corps de vision est pressé dans un plan, l'écran sera incorrect.
4. Exemple de caméra de projection orthogonale
Code source:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> 3.js test 2 </ title> </ head> <body onload = "init ()"> <canvas id = "MainCanvas"> </ canvas> <script type = "text / javascript" src = "js / trois.min.js"> </ script> script> srcc = "js / trois.Min.js"> </ script> script> srcc = "js / trois.min.js"> </ script> script> srcc = "js / trois.Min.js"> </ script> Script> Script> Script = Script = "Js / Three.Min.js"> </ Script> Script> Script> Script = Script = "JS / Threa type = "text / javascript"> function init () {var renderer = new Three.WebglRenderère ({canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // définir la caméra caméra caméra = new Three.othographicaMamera (-2, 2, 1,5, -1,5, 1, 10); caméra.position.set (0, 0, 5); //camera.lookat(New Three.vector3 (0, 0, 0)); scene.add (caméra); // Créer un cube var cube = new Three.Mesh (new Three.CubeGeometry (1, 1, 1), new Three.MeshBasicMaterial ({couleur: 0xff0000, wireframe: true})); scene.add (cube); // Render renderer.render (scène, appareil photo); } </ script> </ body> </html> Lorsque, si la propriété wireframe de THREE.MeshBasicMaterial est vraie , le matériau sera rendu dans un wireframe.
Vous pouvez voir que le bord derrière la position actuelle coïncidera complètement avec celui à l'avant:
4.1 Modifier le rapport longueur et largeur de la vue
Ici, le rapport d'aspect de la toile est de 4: 3, la distance horizontale de la caméra est de 4 et la distance verticale est de 3, donc le rapport longueur et largeur reste inchangé (1: 1).
Si la distance horizontale de la caméra est réduite à 2,
Var Camera = new Three.othographicCamera (-1,1,1,5, -1,5,1,10);
Les objets seront allongés:
Le champ de vision de la caméra est devenu plus étroit, entraînant une augmentation de la proportion latérale du cube dans le champ de vision, qui se manifeste comme un élargissement du cube.
4.2 Modifier la position de la caméra
La position de la caméra dans l'exemple est (0,0,5). Étant donné que la caméra est placée dans la direction négative de l'axe Z par défaut, vous pouvez voir le cube à l'origine.
Déplacez la position de la caméra par 1 unité vers la droite:
Var Camera = new Three.othographicaMamera (-2,2,1,5, -1,5,1,10); caméra.position.set (1,0,5);
La caméra fait face à l'objet, donc la caméra se déplace à droite et l'objet en cours d'éclairage se déplace à gauche:
4.3 Modifier la position de la vue
Définissez la vue à droite:
Var Camera = new Three.othographicCamera (-1,3,1,5, -1,5,1,10); caméra.position.set (1,0,5);
Tout comme déplacer la caméra à droite.
4.4 Modifier l'angle de la caméra
caméra.position.set (4, -3,5); caméra.lookat (new Three.Vector3 (0, 0, 0));
Mais maintenant, la caméra observe le long de la direction négative de l'axe Z, donc le cube ne peut pas être observé, seul un morceau de noir est vu. Nous pouvons spécifier la direction de l'origine via la fonction lookat:
caméra.lookat (new Three.Vector3 (0, 0, 0));
Notez que lookAt accepte une instance de THREE.Vector3 , ne l'écrivez pas comme camera.lookAt(0, 0, 0)
D'accord, ce qui précède est l'intégralité du contenu de Three.JS Learning Apprentiel Orthogonal Projection Camera. J'espère qu'il sera utile pour tout le monde d'en apprendre trois.js. L'éditeur mettra à jour des articles sur trois.js l'un après l'autre. Veuillez continuer à faire attention à wulin.com.