La configuration d'une vue 2D en Three.js

Je suis nouveau sur three.js et suis en train de mettre en place ce qui équivaut à une visualisation 2D (pour un assortiment de couches de sprites) à l'aide de ces outils 3D. J'aimerais avoir quelques conseils sur la PerspectiveCamera() arguments et camera.position.set() arguments. J'ai déjà un coup de pouce dans la bonne direction de cette réponse à un une question relative à la, qui dit jeu de la z coordonner égal à 0 dans camera.position.set(x,y,z).

Ci-dessous l'extrait de code que j'ai fais des modifications à partir de l'une des stemkoski de l'three.js exemples. Les pièces qui y sont accrochés moi pour le moment, ce sont les valeurs de la VIEW_ANGLE, x, et y. En supposant que je veux avoir un plat de vue de la caméra sur un avion de la taille de l'écran, comment dois-je attribuer ces variables? J'ai essayé la gamme de valeurs, mais il est difficile de dire à partir de la visualisation de ce qui se passe. Merci à l'avance!

var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;   
var VIEW_ANGLE = ?, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
var x = ?, y = ?, z = 0;
camera.position.set(x,y,z);
camera.lookAt(scene.position);

Mise à JOUR des perspectives vs caméra orthographique:

Merci @GuyGood, je me rends compte que je dois faire un choix de conception sur le point de vue de la caméra par rapport à la caméra orthographique. Je vois maintenant que le PerspectiveCamera(), même dans ce contexte 2D permettrait pour des choses comme la parallaxe, alors que OrthographicCamera() permettrait une interprétation littérale de tailles (pas de diminuer avec la distance) peu importe ce que la couche de mon élément 2D est sur. Je suis enclin à penser que je vais encore utiliser le PerspectiveCamera() pour des effets tels que de petites quantités de parallaxe entre le sprite couches (donc je suppose que mon projet n'est pas purement 2D!).

Il semble alors que la chose principale est de rendre tout le sprite couches parallèles au plan de projection, et que camera.position.set() est l'orthogonal de la visualisation de la ligne vers le centre du champ de vue.Ce doit être à la base pour beaucoup de gens ici, c'est un nouveau monde pour moi!

Je pense que je dois encore un moment difficile de l'emballage de ma tête, sur le rôle de VIEW_ANGLE, x, et y et de la distance entre la caméra et le loin et le près de de la visualisation des plans en 2D visualisation. Avec la caméra orthographique c'est assez peu important - vous avez juste besoin d'assez de profondeur pour inclure tous les calques que vous voulez et un plan de projection qui convient à vos sprites. Cependant, avec la caméra en perspective le rôle de la profondeur de champ et des influences de l'effet de parallaxe, mais il existe d'autres considérations?

Mise à JOUR 2 - Angle de vue et d'autres variables:

Après un peu plus de l'outillage autour de la poursuite de la réflexion à propos de l'Angle de Vue (Champ de Vue, ou FOV) pour la caméra et les x,y,z arguments en faveur de la position de la caméra, je suis tombé sur ce utile résumé vidéo de la rôle de Champ de Vue dans la conception de jeu (assez proche analogique pour répondre à mes questions pour mon visualisation 2D). Avec cette Champ de vision tutoriel pour les photographes que j'ai aussi trouvé utile (si peut-être une touche de fromage ;), ces deux ressources ont aidé à me faire une idée de la façon de choisir un Champ de vision de mon projet et à ce qu'il soit très large ou étroit Champs de vision (qui sont mesurés en nombre de degrés de 360). Les meilleurs résultats sont un mélange de ce qui se sent comme un champ naturel de la vision de l'homme, en fonction de la distance de l'écran ou de la projection de leur visage, et est aussi profondément liée à l'échelle relative de choses dans le premier plan et arrière-plan dans la visualisation (plus large champs de vision de rendre le fond de l'air plus petit, plus étroit champs de vue de l'agrandissement de l'arrière-plan - similaire, mais pas aussi prononcé que l'effet d'une caméra orthographique). J'espère que vous trouverez ce utile que je l'ai fait!

Mise à JOUR 3 - Poursuite de la lecture

Pour quiconque zesting pour plus de détails sur les spécifications de l'appareil dans une gamme d'utilisations, vous pouvez trouver le chapitre 13 de Infographie Principes et de la Pratique aussi utile que j'ai pour répondre à mes questions ci-dessus et beaucoup plus.

Mise à JOUR 4 - Considérations pour le z de dimension dans la caméra Orthographique

Comme je l'ai continué mon projet, j'ai décidé d'utiliser la caméra orthographique pour que je puisse incrémenter le z dimensions de mes sprites afin d'éviter z-fighting, mais pas de les faire apparaître à reculer progressivement dans la distance. En revanche, si je veux faire apparaître comme si un sprite est éloignée dans la distance, il me suffit d'ajuster sa taille. Cependant, aujourd'hui, j'ai couru à travers une stupide erreur que j'ai voulu montrer pour sauver les autres de la même peine. Bien que la caméra orthographique ne décrivent pas le recul de la taille que les objets sont plus éloignés, qu'il y ait encore un de retour frustrum avion passé lequel les objets seront abattus à partir de la vue. Aujourd'hui, j'ai accidentellement incrémenté les valeurs z de plusieurs de mes objets du passé de l'avion et ne pouvait pas comprendre pourquoi ils n'étaient pas apparaître sur l'écran. Il peut être facile d'oublier ce facteur sur la coordonnée z, tout en travaillant avec la caméra orthographique.

OriginalL'auteur gromiczek | 2014-02-14