Threejs toile de taille basée sur le conteneur
Comment puis-je calculer la taille du canevas basé sur son contenant? Pour éviter le défilement.
Si j'ai mis la taille en fonction de la fenêtre de la toile est trop grand.
Vous devez vous connecter pour publier un commentaire.
Bien,ce n'est pas difficile.Réglez le rendu de la taille de travail.
Sans doute le meilleur moyen pour redimensionner three.js l'utilisation de ce code jusqu'à ce qu'il accepte n'importe quel taille de la toile est fixée par CSS. De cette façon, peu importe la façon dont vous utilisez de la toile de votre code fonctionne, pas besoin de le changer pour différentes situations.
Tout d'abord lors de la définition du format initial il n'y a pas de raison de le définir, parce que nous allons définir en fonction de la taille de la toile étant différents, il est donc tout simplement un gaspillage de code pour définir deux fois
Alors nous avons besoin d'un code qui permettra de redimensionner la zone de travail pour correspondre à sa taille d'affichage
Appeler cela dans votre rendu de la boucle avant de rendre
Voici 3 exemples, la seule différence entre les 3 exemples est le CSS et si nous faisons de la toile ou three.js rend la toile
Exemple 1: plein écran, Nous faisons de la toile
JS:
CSS:
HTML:
Exemple 2: plein écran sur la toile, three.js rend la toile
JS:
CSS:
HTML:
Exemple 3: inline toile
JS:
CSS:
HTML:
Exemple 4: 50% de la largeur de la toile (comme un éditeur en ligne)
JS:
CSS:
HTML:
avis
window.innerWidth
etwindow.innerHeight
ne sont jamais référencé dans le code ci-dessus et pourtant cela fonctionne pour tous les cas.renderer.setSize
et de ne pas passer à false à la fin. C'est sans doute la lutte contre le navigateur. Le point de l'ensemble de CSS est de laisser CSS choisir la taille. Votre toile pourrait être fixé à 50%, 50px, 50em, 50rem, 50vw. Il pourrait être dans un flexbox, dans une table, dans un paragraphe, dans un gridbox. Vous devez choisir la taille du CSS pour l'apparence de la taille, il est. Vous ne devez pas lutter contre le navigateur et la force c'est la taille de JavaScript