web-dev-qa-db-fra.com

Three.js - Caméra orthographique

Je travaille sur une application qui affiche des modèles 3D. Nous chargeons les modèles, créons les maillages, les ajoutons à la scène ... procédure standard. Une fois le dernier maillage ajouté, nous calculons le cadre de sélection afin de déplacer la caméra et de couvrir toute la scène, en utilisant la taille de la géométrie totale et la taille de la fenêtre d'affichage pour effectuer 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 du cadre de sélection. Après ce calcul, nous déplaçons la caméra (plus un petit ratio, juste de l'esthétique, nous voulons un peu d'espace entre la géométrie et la bordure de l'écran :)) et rendons

    camera.position.z = r * 1.05;

Jusqu'à présent, cela est mis en œuvre et fonctionne bien. 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 petits, nous perdons le zoom de la souris avec la souris sur la TrackBall Controls et l'algorithme pour déplacer la caméra ne fonctionne plus. Aussi je ne comprends pas les paramètres du constructeur pour la caméra ... ces largeur et hauteur sont pour la géométrie ou la fenêtre?

javascript3dthree.js
11
Leprosy

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

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 du tronc de cube de la caméra mesuré en espace-monde unités.

near et far sont les world-space distances aux plans lointain et rapproché du tronc. near et far doivent être supérieurs à zéro.

Pour éviter toute distorsion, vous souhaiterez généralement que le rapport de format de la caméra orthographique (width / height) corresponde au rapport de format de la zone de rendu du rendu. (voir note ci-dessous)

Il est regrettable que de nombreux exemples de three.js transmettent window.innerWidth et window.innerHeight comme arguments à ce constructeur. Cela n'a de sens que si la caméra orthographique est utilisée pour le rendu d'une texture ou si les unités universelles de votre scène orthographique sont en pixels.

* Remarque: le rapport hauteur/largeur de la caméra doit correspondre à celui de la fenêtre de rendu. La fenêtre peut être une sous-région de la toile. Si vous ne définissez pas directement la fenêtre d'affichage du rendu à l'aide de renderer.setViewport(), la fenêtre d'affichage aura la même taille que le canevas et aura donc les mêmes proportions que le canevas.

trois.js r.73

31
WestLangley

Pour référence future: 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 
);
3
Ivan Bacher
            camera.top = (.95*camera.top);
            camera.bottom = (.95*camera.bottom);
            camera.left = (.95*camera.left);
            camera.right = (.95*camera.right);
1
contehhh