Étape 2b — La caméra

Détour · le trou du fil principal

new THREE.PerspectiveCamera(75, aspect, 0.1, 1000) est là depuis l'étape 0, et vous avez recopié ses quatre arguments sans qu'on vous en dise un mot. Les voici.

Trois focales, même scène, et surtout : la boule fait la même taille dans les trois. Le FOV n'est donc pas un zoom — regardez ce qui arrive au fond.

near — rien de plus proche n'est dessiné 0.10 far — rien de plus lointain n'est dessiné 1000

Ce qu'il faut savoir (5)

• Le FOV n'est pas un zoom, c'est un objectif. Les trois volets cadrent la boule à l'identique — j'ai reculé la caméra à mesure que le FOV se ferme. Et pourtant les images n'ont rien à voir : à 20° les piliers du fond s'écrasent contre la boule, à 100° ils fuient au loin. Le FOV décide du rapport entre le proche et le lointain, pas de la taille du sujet. C'est le « dolly zoom » d'Hitchcock, et c'est pourquoi un portrait se photographie au téléobjectif : à 100°, le nez d'un visage doublerait.
• Le FOV de Three.js est VERTICAL, en degrés. C'est aspect qui en déduit l'horizontal. Une fenêtre plus large ne rapproche donc rien : elle montre davantage sur les côtés.
• near et far ne sont pas des réglages de visibilité — c'est là qu'est le piège. Ils déterminent la précision du tampon de profondeur, et cette précision dépend de leur rapport. Poussez les curseurs vers un rapport énorme : les deux plaques du fond se mettent à clignoter. C'est le z-fighting : la carte graphique ne sait plus laquelle est devant.
• Gardez near aussi GRAND que possible. C'est lui qui compte, bien plus que far : la précision s'effondre près de la caméra. Passer near de 0,001 à 0,1 vous rend cent fois plus de précision ; multiplier far par dix ne vous en coûte presque rien. Le réflexe « near = 0.001 pour ne rien rater » est exactement le contraire de ce qu'il faut faire.
• Toucher un paramètre ne suffit pas. La caméra travaille avec une matrice de projection calculée une fois ; changer fov, aspect, near ou far ne fait rien tant qu'on n'appelle pas camera.updateProjectionMatrix(). C'est l'oubli classique du redimensionnement (étape 6).

← Précédent · Suivant →