Three.js - caméra Orthographique

J'ai travailler sur une application qui affiche certains des modèles 3D. On charge les modèles, créer les mailles, les ajouter à la scène...d'une procédure standard. Après la dernière maille est ajouté, on calcule la boîte englobante afin de déplacer la caméra et de couvrir l'ensemble de la scène, à l'aide de la taille totale de la géométrie et de la taille de la fenêtre d'affichage afin de faire le calcul.

    if (bounds.bx / bounds.by < camera.aspect) {
        /* Vertical max */
        r = bounds.by / (2 * Math.tan(Math.PI / 8));
    } else {
        /* Horizontal max */
        hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect);
        r = bounds.bx / (2 * Math.tan((hFOV / 2)));
    }

bounds est un objet contenant la largeur et la hauteur de la boîte englobante. Après ce calcul, nous déplacer la caméra(plus un peu de ratio, il suffit de l'esthétique, nous voulons un peu de place entre la géométrie et la bordure de l'écran 🙂 ) et de rendre

    camera.position.z = r * 1.05;

La mesure où cela est mis en œuvre et fonctionne ok. Cela a été fait avec PerspectiveCamera. Maintenant, nous voulons changer cela et utiliser OrthographicCamera...s'avère être un gâchis. Les modèles sont trop petites, nous perdons la molette de zoom à partir de la boule de commande Contrôle et l'algorithme de déplacer la caméra ne fonctionne plus. Aussi je ne comprends pas les paramètres du constructeur de l'appareil photo...ces la largeur et la hauteur sont de la géométrie ou de la fenêtre d'affichage?

OriginalL'auteur Leprosy | 2013-07-09

  1. 30

    Le modèle pour l'instanciation d'une caméra orthographique dans three.js est:

    var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );

    où width et height sont la largeur et la hauteur de la caméra d'un parallélépipède en forme de champ de vue mesuré dans de l'espace-monde unités.

    near et far sont les de l'espace-monde les distances de près et de loin les avions du champ de vue. Les deux near et far doit être supérieure à zéro.

    Pour éviter la distorsion, vous souhaitez généralement le ratio d'aspect de la caméra orthographique ( width /height ) en fonction du rapport d'aspect du rendu de la toile. (voir *la Note ci-dessous)

    Il est regrettable que de nombreux three.js exemples de passer window.innerWidth et window.innerHeight comme arguments pour ce constructeur. Le faire n'a de sens que si la caméra orthographique est utilisé pour le rendu de la texture, ou si les unités du monde pour votre orthographique de la scène sont en pixels.

    *Remarque: en Réalité, les proportions de la caméra doit correspondre au ratio d'aspect de la fonctionnalité de rendu de la fenêtre d'affichage. La fenêtre d'affichage peut être une sous-région de la toile. Si vous ne définissez pas le rendu de la fenêtre d'affichage directement à l'aide de renderer.setViewport(), la fenêtre sera de la même taille que la toile, et ont donc le même aspect que le ratio de la toile.

    three.js r.73

    Je comprends, mais...comment puis-je déplacer la caméra sur l'axe Z, comme je l'ai fait avec le code ci-dessus en mode Perspective?
    Déplacement de l'appareil vers l'avant ou vers l'arrière ne change pas la projection orthographique.
    Maintenant, je comprends. Donc, nous devons utiliser l'appareil.setZoom? Je suis un peu confus ici, parce que la largeur et la hauteur utilisée dans le constructeur ne semble pas modifier la taille de la fenêtre. J'ai utilisé, par exemple (1600, 1200) comme w/h, et (16, 12) et le résultat est le même.
    Oui il devrait, mais il n'a pas à être.
    La scène apparaît tendu.

    OriginalL'auteur WestLangley

  2. 3

    De référence pour l'avenir:
    bonne vidéo de 5min

    var w = container.clientWidth;
var h = container.clientHeight;
var viewSize = h;
var aspectRatio = w / h;

_viewport = {
    viewSize: viewSize,
    aspectRatio: aspectRatio,
    left: (-aspectRatio * viewSize) / 2,
    right: (aspectRatio * viewSize) / 2,
    top: viewSize / 2,
    bottom: -viewSize / 2,
    near: -100,
    far: 100
}

_camera = new THREE.OrthographicCamera ( 
    _viewport.left, 
    _viewport.right, 
    _viewport.top, 
    _viewport.bottom, 
    _viewport.near, 
    _viewport.far 
);
    1. La caméra orthographique paramètres sont les unités du monde. Sont votre monde en unités de pixels? 2. Aussi, en dépit de ce que vous avez vu dans le passé, ou dans la vidéo: le plan devrait être positif, de sorte que le champ de vue est en face de la caméra.
    Oh, je vois, haha. Merci pour l'explication
    +1 pour le lien vidéo, -1 pour le code (désolé!), plus précisément: var viewSize = h; au Lieu viewSize devrait être uniquement dépendant de la taille (dans le monde coords) des objets dans votre scène.
    Vous semblez avoir fondamental de fausses idées, mais ce n'est pas le bon endroit pour en discuter. Merci de faire un nouveau post si vous ne pouvez pas comprendre vous-même via l'expérimentation. Un négatif de près de avion va rendre les objets derrière la caméra.

    OriginalL'auteur Ivan Bacher

  3. 1
                camera.top = (.95*camera.top);
            camera.bottom = (.95*camera.bottom);
            camera.left = (.95*camera.left);
            camera.right = (.95*camera.right);

    OriginalL'auteur contehhh