Partage de code adaptatif lorsque les navigateurs changent-js tutoriel-php.cn

Partage de code adaptatif lorsque les navigateurs changent

小云云

Libérer： 2018-01-31 14:57:44

original

1939 Les gens l'ont consulté

Parfois, nous ouvrons la page du navigateur et affichons le modèle actuellement rendu. Cependant, si vous ne définissez pas le modèle de scène pour qu'il s'adapte aux changements de largeur et de hauteur du navigateur, ce sera gg. Cet article vous présente principalement la méthode de Three.js pour s'adapter lorsque le navigateur change. L'article la présente en détail à travers un exemple de code.

Si la scène s'adapte à mesure que la taille du navigateur change, vous devez surveiller l'événement de redimensionnement de la fenêtre, qui est l'événement de changement de navigateur.

window.onresize = function(){}

Copier après la connexion

Ou utilisez l'événement addEventListener

window.addEventListener("resize",function(){})

Copier après la connexion

Une fois l'écoute de l'événement réussie, vous devez pour écrire les modifications Enfin, l'expression qui doit être déclenchée est :

//窗口变动触发的函数 
function onWindowResize() { 
 
 camera.aspect = window.innerWidth / window.innerHeight; 
 camera.updateProjectionMatrix(); 
 renderer.setSize( window.innerWidth, window.innerHeight ); 
 
}

Copier après la connexion

Ce qui précède met principalement à jour la proportion de la caméra et la proportion du moteur de rendu pour atteindre l'objectif effet actuel.

Le code est utilisé dans la section précédente, je ne téléchargerai donc pas le code (si vous en avez besoin, cliquez ici), mais je téléchargerai deux exemples d'effets.