Cet article a été révisé par des pairs par Paul O’Brien. Merci à tous les pairs examinateurs de SitePoint pour avoir rendu le contenu SitePoint le meilleur possible!
"},{"id":"text-2","type":"text","heading":"","plain_text":"J'ai toujours voulu créer un jeu 3D. Je n'ai tout simplement jamais eu le temps et l'énergie pour apprendre les subtilités de la programmation 3D. J'ai découvert que je n'avais pas besoin de …\nEn bricolant un jour, j'ai pensé que je pourrais peut-être simuler un environnement 3D en utilisant des transformations CSS. Je suis tombé sur un vieil article sur la création de mondes 3D avec HTML et CSS.\nJe voulais simuler un monde Minecraft (ou une infime partie de celui-ci au moins). Minecraft est un jeu de bac à sable, dans lequel vous pouvez casser et placer des blocs. Je voulais le même type de fonctionnalité, mais avec HTML, JavaScript et CSS.\nVenez décrire ce que j'ai appris et comment cela peut vous aider à être plus créatif avec vos transformations CSS!","html":"J'ai toujours voulu créer un jeu 3D. Je n'ai tout simplement jamais eu le temps et l'énergie pour apprendre les subtilités de la programmation 3D. J'ai découvert que je n'avais pas besoin de …\nEn bricolant un jour, j'ai pensé que je pourrais peut-être simuler un environnement 3D en utilisant des transformations CSS. Je suis tombé sur un vieil article sur la création de mondes 3D avec HTML et CSS.\nJe voulais simuler un monde Minecraft (ou une infime partie de celui-ci au moins). Minecraft est un jeu de bac à sable, dans lequel vous pouvez casser et placer des blocs. Je voulais le même type de fonctionnalité, mais avec HTML, JavaScript et CSS.\nVenez décrire ce que j'ai appris et comment cela peut vous aider à être plus créatif avec vos transformations CSS!
"},{"id":"text-3","type":"text","heading":"","plain_text":"Remarque: La plupart du code de ce didacticiel se trouve sur Github. Je l'ai testé dans la dernière version de Chrome. Je ne peux pas vous promettre que cela aura exactement la même apparence dans d'autres navigateurs, mais les concepts de base sont universels.","html":"Remarque: La plupart du code de ce didacticiel se trouve sur Github. Je l'ai testé dans la dernière version de Chrome. Je ne peux pas vous promettre que cela aura exactement la même apparence dans d'autres navigateurs, mais les concepts de base sont universels.
"},{"id":"text-4","type":"text","heading":"","plain_text":"Ce n'est que la moitié de l'aventure. Si vous souhaitez savoir comment conserver les conceptions sur un serveur réel, consultez la publication sœur, PHP Minecraft Mod. Nous y explorons des moyens d'interagir avec un serveur Minecraft, de le manipuler en temps réel et de répondre aux entrées des utilisateurs.\nLes choses que nous faisons déjà\nJ'ai écrit ma juste part de CSS et j'en suis venu à bien le comprendre, dans le but de créer des sites Web. Mais cette compréhension repose sur l'hypothèse que je vais travailler dans un espace 2D.\nPrenons un exemple:\n.outils \n position: absolue;\n gauche: 35px;\n haut: 25px;\n largeur: 200 px;\n hauteur: 400px;\n indice z: 3;","html":"Ce n'est que la moitié de l'aventure. Si vous souhaitez savoir comment conserver les conceptions sur un serveur réel, consultez la publication sœur, PHP Minecraft Mod. Nous y explorons des moyens d'interagir avec un serveur Minecraft, de le manipuler en temps réel et de répondre aux entrées des utilisateurs.\nLes choses que nous faisons déjà\nJ'ai écrit ma juste part de CSS et j'en suis venu à bien le comprendre, dans le but de créer des sites Web. Mais cette compréhension repose sur l'hypothèse que je vais travailler dans un espace 2D.\nPrenons un exemple:\n.outils \n position: absolue;\n gauche: 35px;\n haut: 25px;\n largeur: 200 px;\n hauteur: 400px;\n indice z: 3;
"},{"id":"text-5","type":"text","heading":"","plain_text":".Toile \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 100%;\n hauteur: 100%;\n indice z: 2;","html":".Toile \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 100%;\n hauteur: 100%;\n indice z: 2;
"},{"id":"text-6","type":"text","heading":"","plain_text":"Ici, nous avons un élément canvas, commençant dans le coin supérieur gauche de la page et s'étendant jusqu'en bas à droite. En plus de cela, nous ajoutons un élément outils. Il commence 25px de gauche et 35px en haut de la page et les mesures 200px large par 400px haute.\nSelon la commande div.tools et div.canvas sont ajoutés au balisage, il est tout à fait possible que div.canvas pourrait se chevaucher div.tools. C'est à l'exception de la z-index styles appliqués à chacun.\nVous êtes probablement habitué à considérer les éléments ainsi conçus comme des surfaces 2D susceptibles de se chevaucher. Mais ce chevauchement est essentiellement une troisième dimension. la gauche, Haut, et z-index peut aussi bien être renommé X, y, et z. Tant que nous supposons que chaque élément a une profondeur fixe de 1px, et z-index a un implicite px unité, nous pensons déjà en termes 3D.\nCertains d'entre nous ont tendance à avoir du mal avec les concepts de rotation et de traduction dans cette troisième dimension…\nLa théorie des transformations\nLes traductions CSS dupliquent cette fonctionnalité familière, dans une API qui dépasse les limites Haut, la gauche, et z-index placer sur nous. Il est possible de remplacer certains de nos styles précédents par des traductions:\n.outils \n position: absolue;\n fond: vert;\n / *\n gauche: 35px;\n haut: 25px;\n * /\n transform-origin: 0 0;\n transformer: traduire (35px, 25px);\n largeur: 200 px;\n hauteur: 400px;\n indice z: 3;","html":"Ici, nous avons un élément canvas, commençant dans le coin supérieur gauche de la page et s'étendant jusqu'en bas à droite. En plus de cela, nous ajoutons un élément outils. Il commence 25px de gauche et 35px en haut de la page et les mesures 200px large par 400px haute.\nSelon la commande div.tools et div.canvas sont ajoutés au balisage, il est tout à fait possible que div.canvas pourrait se chevaucher div.tools. C'est à l'exception de la z-index styles appliqués à chacun.\nVous êtes probablement habitué à considérer les éléments ainsi conçus comme des surfaces 2D susceptibles de se chevaucher. Mais ce chevauchement est essentiellement une troisième dimension. la gauche, Haut, et z-index peut aussi bien être renommé X, y, et z. Tant que nous supposons que chaque élément a une profondeur fixe de 1px, et z-index a un implicite px unité, nous pensons déjà en termes 3D.\nCertains d'entre nous ont tendance à avoir du mal avec les concepts de rotation et de traduction dans cette troisième dimension…\nLa théorie des transformations\nLes traductions CSS dupliquent cette fonctionnalité familière, dans une API qui dépasse les limites Haut, la gauche, et z-index placer sur nous. Il est possible de remplacer certains de nos styles précédents par des traductions:\n.outils \n position: absolue;\n fond: vert;\n / *\n gauche: 35px;\n haut: 25px;\n * /\n transform-origin: 0 0;\n transformer: traduire (35px, 25px);\n largeur: 200 px;\n hauteur: 400px;\n indice z: 3;
"},{"id":"text-7","type":"text","heading":"","plain_text":"Au lieu de définir la gauche et Haut compensations (avec une origine supposée de 0px de gauche et 0px par le haut), nous pouvons déclarer une origine explicite. Nous pouvons effectuer toutes sortes de transformations sur cet élément, pour lesquelles utiliser 0 0 comme centre. traduire (35px, 25px) déplace l'élément 35px à droite et 25px vers le bas. Nous pouvons utiliser des valeurs négatives pour déplacer l'élément vers la gauche et / ou vers le haut.\nAvec la possibilité de définir une origine pour nos transformations, nous pouvons également commencer à faire d'autres choses intéressantes. Par exemple, nous pouvons faire pivoter et mettre à l'échelle des éléments:\ntransform-origin: centre;\ntransformer: l'échelle (0,5) tourne (45 degrés);","html":"Au lieu de définir la gauche et Haut compensations (avec une origine supposée de 0px de gauche et 0px par le haut), nous pouvons déclarer une origine explicite. Nous pouvons effectuer toutes sortes de transformations sur cet élément, pour lesquelles utiliser 0 0 comme centre. traduire (35px, 25px) déplace l'élément 35px à droite et 25px vers le bas. Nous pouvons utiliser des valeurs négatives pour déplacer l'élément vers la gauche et / ou vers le haut.\nAvec la possibilité de définir une origine pour nos transformations, nous pouvons également commencer à faire d'autres choses intéressantes. Par exemple, nous pouvons faire pivoter et mettre à l'échelle des éléments:\ntransform-origin: centre;\ntransformer: l'échelle (0,5) tourne (45 degrés);
"},{"id":"text-8","type":"text","heading":"","plain_text":"Chaque élément commence par un défaut transform-origin de 50% 50% 0, mais une valeur de centre ensembles X, y, et z à l'équivalent de 50%. Nous pouvons adapter notre élément à une valeur comprise entre 0 et 1et faites-le pivoter (dans le sens horaire) de degrés ou de radians. Et nous pouvons convertir entre les deux avec:","html":"Chaque élément commence par un défaut transform-origin de 50% 50% 0, mais une valeur de centre ensembles X, y, et z à l'équivalent de 50%. Nous pouvons adapter notre élément à une valeur comprise entre 0 et 1et faites-le pivoter (dans le sens horaire) de degrés ou de radians. Et nous pouvons convertir entre les deux avec:
"},{"id":"text-9","type":"text","heading":"","plain_text":"45deg = (45 * Math.PI) / 180 ≅ 0.79rad\n0.79rad = (0,79 * 180) / Math.PI ≅ 45deg","html":"45deg = (45 * Math.PI) / 180 ≅ 0.79rad\n0.79rad = (0,79 * 180) / Math.PI ≅ 45deg
"},{"id":"text-10","type":"text","heading":"","plain_text":"Pour faire pivoter un élément dans le sens inverse des aiguilles d'une montre, il suffit d'utiliser un négatif deg ou rad valeur.\nCe qui est encore plus intéressant, à propos de ces transformations, c'est que nous pouvons en utiliser des versions 3D.","html":"Pour faire pivoter un élément dans le sens inverse des aiguilles d'une montre, il suffit d'utiliser un négatif deg ou rad valeur.\nCe qui est encore plus intéressant, à propos de ces transformations, c'est que nous pouvons en utiliser des versions 3D.
"},{"id":"text-11","type":"text","heading":"","plain_text":"Les navigateurs Evergreen prennent assez bien en charge ces styles, bien qu'ils puissent nécessiter des préfixes de fournisseurs. CodePen a une option "autoprefix" soignée, mais vous pouvez ajouter des bibliothèques comme PostCSS à votre code local pour obtenir la même chose.","html":"Les navigateurs Evergreen prennent assez bien en charge ces styles, bien qu'ils puissent nécessiter des préfixes de fournisseurs. CodePen a une option "autoprefix" soignée, mais vous pouvez ajouter des bibliothèques comme PostCSS à votre code local pour obtenir la même chose.
"},{"id":"text-12","type":"text","heading":"","plain_text":"Le premier bloc\nCommençons à créer notre monde 3D. Nous allons commencer par créer un espace dans lequel placer nos blocs. Créez un nouveau fichier, appelé index.html:","html":"Le premier bloc\nCommençons à créer notre monde 3D. Nous allons commencer par créer un espace dans lequel placer nos blocs. Créez un nouveau fichier, appelé index.html:
"},{"id":"text-13","type":"text","heading":"","plain_text":"Ici, nous étirons le corps sur toute la largeur et la hauteur, réinitialisant le rembourrage 0px. Ensuite, nous créons un petit div.scene, que nous utiliserons pour contenir différents blocs. Nous utilisons 50% la gauche et Haut, ainsi qu'une gauche et un haut négatifs marge (égal à la moitié du largeur et la taille) pour le centrer horizontalement et verticalement. Ensuite, nous l'inclinons légèrement (en utilisant la rotation 3D) afin d'avoir une vue en perspective de l'emplacement des blocs.","html":"Ici, nous étirons le corps sur toute la largeur et la hauteur, réinitialisant le rembourrage 0px. Ensuite, nous créons un petit div.scene, que nous utiliserons pour contenir différents blocs. Nous utilisons 50% la gauche et Haut, ainsi qu'une gauche et un haut négatifs marge (égal à la moitié du largeur et la taille) pour le centrer horizontalement et verticalement. Ensuite, nous l'inclinons légèrement (en utilisant la rotation 3D) afin d'avoir une vue en perspective de l'emplacement des blocs.
"},{"id":"text-14","type":"text","heading":"","plain_text":"Remarquez comment nous définissons style de transformation: préserver-3d. C'est ainsi que les éléments enfants peuvent également être manipulés dans un espace 3D.","html":"Remarquez comment nous définissons style de transformation: préserver-3d. C'est ainsi que les éléments enfants peuvent également être manipulés dans un espace 3D.
"},{"id":"text-15","type":"text","heading":"","plain_text":"Le résultat devrait ressembler à ceci:\nVoir la scène vide du stylo par SitePoint (@SitePoint) sur CodePen.\nMaintenant, commençons à ajouter une forme de bloc à la scène. Nous devons créer un nouveau fichier JavaScript, appelé block.js:\n"utiliser strictement"","html":"Le résultat devrait ressembler à ceci:\nVoir la scène vide du stylo par SitePoint (@SitePoint) sur CodePen.\nMaintenant, commençons à ajouter une forme de bloc à la scène. Nous devons créer un nouveau fichier JavaScript, appelé block.js:\n"utiliser strictement"
"},{"id":"text-16","type":"text","heading":"","plain_text":"bloc de classe \n constructeur (x, y, z) \n this.x = x;\n this.y = y;\n this.z = z;","html":"bloc de classe \n constructeur (x, y, z) \n this.x = x;\n this.y = y;\n this.z = z;
"},{"id":"text-17","type":"text","heading":"","plain_text":" this.build ();\n ","html":"this.build ();\n
"},{"id":"text-18","type":"text","heading":"","plain_text":" construire() \n // TODO: construire le bloc\n ","html":"construire() \n // TODO: construire le bloc\n
"},{"id":"text-19","type":"text","heading":"","plain_text":" createFace (type, x, y, z, rx, ry, rz) \n // TODO: retourne une face de bloc\n ","html":"createFace (type, x, y, z, rx, ry, rz) \n // TODO: retourne une face de bloc\n
"},{"id":"text-20","type":"text","heading":"","plain_text":" createTexture (type) \n // TODO: obtenez la texture\n ","html":"createTexture (type) \n // TODO: obtenez la texture\n
"},{"id":"text-21","type":"text","heading":"","plain_text":"Chaque bloc doit avoir une forme 3D à 6 faces. Nous pouvons diviser les différentes parties de la construction en méthodes pour (1) construire le bloc entier, (2) construire chaque surface et (3) obtenir la texture de chaque surface.\nChacun de ces comportements (ou méthodes) est contenu dans une classe ES6. C’est une bonne façon de regrouper les structures de données et les méthodes qui les opèrent ensemble. Vous connaissez peut-être la forme traditionnelle:\nbloc fonction (x, y, z) \n this.x = x;\n this.y = y;\n this.z = z;","html":"Chaque bloc doit avoir une forme 3D à 6 faces. Nous pouvons diviser les différentes parties de la construction en méthodes pour (1) construire le bloc entier, (2) construire chaque surface et (3) obtenir la texture de chaque surface.\nChacun de ces comportements (ou méthodes) est contenu dans une classe ES6. C’est une bonne façon de regrouper les structures de données et les méthodes qui les opèrent ensemble. Vous connaissez peut-être la forme traditionnelle:\nbloc fonction (x, y, z) \n this.x = x;\n this.y = y;\n this.z = z;
"},{"id":"text-22","type":"text","heading":"","plain_text":" this.build ();","html":"this.build ();
"},{"id":"text-23","type":"text","heading":"","plain_text":"var proto = Block.prototype;","html":"var proto = Block.prototype;
"},{"id":"text-24","type":"text","heading":"","plain_text":"proto.build = function () \n // TODO: construire le bloc\n;","html":"proto.build = function () \n // TODO: construire le bloc\n;
"},{"id":"text-25","type":"text","heading":"","plain_text":"proto.createFace = fonction (type, x, y, z, rx, ry, rz) \n // TODO: retourne une face de bloc","html":"proto.createFace = fonction (type, x, y, z, rx, ry, rz) \n // TODO: retourne une face de bloc
"},{"id":"text-26","type":"text","heading":"","plain_text":"proto.createTexture = fonction (type) \n // TODO: obtenez la texture","html":"proto.createTexture = fonction (type) \n // TODO: obtenez la texture
"},{"id":"text-27","type":"text","heading":"","plain_text":"Cela peut sembler un peu différent, mais c'est à peu près la même chose. En plus d'une syntaxe plus courte, les classes ES6 fournissent également des raccourcis pour étendre les prototypes et appeler les méthodes remplacées. Mais je m'égare…\nTravaillons de bas en haut:\ncreateFace (type, x, y, z, rx, ry, rz) \n retourner $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n rotationX ($ rx deg)\n rotationY ($ ry deg)\n rotationZ ($ rz deg)\n ",\n fond: this.createTexture (type)\n );","html":"Cela peut sembler un peu différent, mais c'est à peu près la même chose. En plus d'une syntaxe plus courte, les classes ES6 fournissent également des raccourcis pour étendre les prototypes et appeler les méthodes remplacées. Mais je m'égare…\nTravaillons de bas en haut:\ncreateFace (type, x, y, z, rx, ry, rz) \n retourner $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n rotationX ($ rx deg)\n rotationY ($ ry deg)\n rotationZ ($ rz deg)\n ",\n fond: this.createTexture (type)\n );
"},{"id":"text-28","type":"text","heading":"","plain_text":"createTexture (type) \n retour `rgba (100, 100, 255, 0,2)`;","html":"createTexture (type) \n retour `rgba (100, 100, 255, 0,2)`;
"},{"id":"text-29","type":"text","heading":"","plain_text":"Chaque surface (ou face) est constituée d'un div tourné et translaté. Nous ne pouvons pas rendre les éléments plus épais que 1px, mais nous pouvons simuler la profondeur en couvrant tous les trous et en utilisant plusieurs éléments parallèles les uns aux autres. On peut donner au bloc l'illusion de profondeur, même s'il est creux.\nÀ cette fin, le createFace prend un ensemble de coordonnées: X, y, et z pour la position du visage. Nous fournissons également des rotations pour chaque axe, afin que nous puissions appeler createFace avec n'importe quelle configuration et il traduira et fera pivoter le visage comme nous le voulons.\nConstruisons la forme de base:\nconstruire() \n taille const = 64;\n const x = this.x * taille;\n const y = this.y * taille;\n const z = this.z * taille;","html":"Chaque surface (ou face) est constituée d'un div tourné et translaté. Nous ne pouvons pas rendre les éléments plus épais que 1px, mais nous pouvons simuler la profondeur en couvrant tous les trous et en utilisant plusieurs éléments parallèles les uns aux autres. On peut donner au bloc l'illusion de profondeur, même s'il est creux.\nÀ cette fin, le createFace prend un ensemble de coordonnées: X, y, et z pour la position du visage. Nous fournissons également des rotations pour chaque axe, afin que nous puissions appeler createFace avec n'importe quelle configuration et il traduira et fera pivoter le visage comme nous le voulons.\nConstruisons la forme de base:\nconstruire() \n taille const = 64;\n const x = this.x * taille;\n const y = this.y * taille;\n const z = this.z * taille;
"},{"id":"text-30","type":"text","heading":"","plain_text":" const block = this.block = $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n "\n );","html":"const block = this.block = $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n "\n );
"},{"id":"text-31","type":"text","heading":"","plain_text":" $ (`')\n .appendTo (bloquer)\n .css (\n transformer: `\n rotationX (90deg)\n rotationY (0deg)\n rotationZ (0deg)\n "\n );","html":"$ (`')\n .appendTo (bloquer)\n .css (\n transformer: `\n rotationX (90deg)\n rotationY (0deg)\n rotationZ (0deg)\n "\n );
"},{"id":"text-32","type":"text","heading":"","plain_text":" $ (`')\n .appendTo (bloquer)\n .css (\n transformer: `\n rotationX (0deg)\n rotationY (90deg)\n rotationZ (0deg)\n "\n );","html":"$ (`')\n .appendTo (bloquer)\n .css (\n transformer: `\n rotationX (0deg)\n rotationY (90deg)\n rotationZ (0deg)\n "\n );
"},{"id":"text-33","type":"text","heading":"","plain_text":" $ (`')\n .appendTo (block);","html":"$ (`')\n .appendTo (block);
"},{"id":"text-34","type":"text","heading":"","plain_text":"Nous avons l'habitude de penser en termes de positions d'un pixel, mais un jeu comme Minecraft fonctionne à plus grande échelle. Chaque bloc est plus grand et le système de coordonnées traite de la position du bloc, pas des pixels individuels qui le composent. Je veux transmettre le même genre d'idée ici…\nLorsque quelqu'un crée un nouveau bloc, à 1 × 2 × 3, Je veux que cela signifie 0px × 64px × 128px. Nous multiplions donc chaque coordonnée par la taille par défaut (dans ce cas 64px, car c'est la taille des textures du pack de textures que nous utiliserons).\nEnsuite, nous créons un conteneur div (que nous appelons div.block). À l'intérieur, nous plaçons encore 3 divisions. Ceux-ci nous montreront l'axe de notre bloc – ils sont comme des guides dans un programme de rendu 3D. Nous devons également ajouter de nouveaux CSS pour notre bloc:\n.bloquer \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 64px;\n hauteur: 64px;\n transformer-style: préserver-3d;\n origine de transformation: 50% 50% 50%;","html":"Nous avons l'habitude de penser en termes de positions d'un pixel, mais un jeu comme Minecraft fonctionne à plus grande échelle. Chaque bloc est plus grand et le système de coordonnées traite de la position du bloc, pas des pixels individuels qui le composent. Je veux transmettre le même genre d'idée ici…\nLorsque quelqu'un crée un nouveau bloc, à 1 × 2 × 3, Je veux que cela signifie 0px × 64px × 128px. Nous multiplions donc chaque coordonnée par la taille par défaut (dans ce cas 64px, car c'est la taille des textures du pack de textures que nous utiliserons).\nEnsuite, nous créons un conteneur div (que nous appelons div.block). À l'intérieur, nous plaçons encore 3 divisions. Ceux-ci nous montreront l'axe de notre bloc – ils sont comme des guides dans un programme de rendu 3D. Nous devons également ajouter de nouveaux CSS pour notre bloc:\n.bloquer \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 64px;\n hauteur: 64px;\n transformer-style: préserver-3d;\n origine de transformation: 50% 50% 50%;
"},{"id":"text-35","type":"text","heading":"","plain_text":"axe .x,\naxe-y,\n.Axe z \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 66px;\n hauteur: 66px;\n origine de transformation: 50% 50% 50%;","html":"axe .x,\naxe-y,\n.Axe z \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 66px;\n hauteur: 66px;\n origine de transformation: 50% 50% 50%;
"},{"id":"text-36","type":"text","heading":"","plain_text":"Axe .x \n bordure: solide 2px rgba (255, 0, 0, 0,3);","html":"Axe .x \n bordure: solide 2px rgba (255, 0, 0, 0,3);
"},{"id":"text-37","type":"text","heading":"","plain_text":"Axe .y \n bordure: solide 2px rgba (0, 255, 0, 0,3);","html":"Axe .y \n bordure: solide 2px rgba (0, 255, 0, 0,3);
"},{"id":"text-38","type":"text","heading":"","plain_text":".Axe z \n bordure: solide 2px rgba (0, 0, 255, 0,3);","html":".Axe z \n bordure: solide 2px rgba (0, 0, 255, 0,3);
"},{"id":"text-39","type":"text","heading":"","plain_text":"Ce style est similaire à ce que nous avons vu auparavant. Nous devons nous rappeler de définir style de transformation: préserver-3d sur le .bloquer, afin que les axes soient rendus dans leur propre espace 3D. Nous leur donnons une couleur différente et les rendons légèrement plus grands que le bloc dans lequel ils sont contenus. C'est pour qu'ils soient visibles même lorsque le bloc a des côtés.\nCréons un nouveau bloc et ajoutons-le au div.scene:\nlet first = new Block (1, 1, 1);","html":"Ce style est similaire à ce que nous avons vu auparavant. Nous devons nous rappeler de définir style de transformation: préserver-3d sur le .bloquer, afin que les axes soient rendus dans leur propre espace 3D. Nous leur donnons une couleur différente et les rendons légèrement plus grands que le bloc dans lequel ils sont contenus. C'est pour qu'ils soient visibles même lorsque le bloc a des côtés.\nCréons un nouveau bloc et ajoutons-le au div.scene:\nlet first = new Block (1, 1, 1);
"},{"id":"text-40","type":"text","heading":"","plain_text":"$ (". scene"). append (first.block);","html":"$ (". scene"). append (first.block);
"},{"id":"text-41","type":"text","heading":"","plain_text":"Le résultat devrait ressembler à ceci:\nVoir le Pen Basic 3D Block de SitePoint (@SitePoint) sur CodePen.\nMaintenant, ajoutons ces visages:\ncette\n .createFace ("top", 0, 0, size / 2, 0, 0, 0)\n .appendTo (block);","html":"Le résultat devrait ressembler à ceci:\nVoir le Pen Basic 3D Block de SitePoint (@SitePoint) sur CodePen.\nMaintenant, ajoutons ces visages:\ncette\n .createFace ("top", 0, 0, size / 2, 0, 0, 0)\n .appendTo (block);
"},{"id":"text-42","type":"text","heading":"","plain_text":"cette\n .createFace ("side-1", 0, taille / 2, 0, 270, 0, 0)\n .appendTo (block);","html":"cette\n .createFace ("side-1", 0, taille / 2, 0, 270, 0, 0)\n .appendTo (block);
"},{"id":"text-43","type":"text","heading":"","plain_text":"cette\n .createFace ("side-2", taille / 2, 0, 0, 0, 90, 0)\n .appendTo (block);","html":"cette\n .createFace ("side-2", taille / 2, 0, 0, 0, 90, 0)\n .appendTo (block);
"},{"id":"text-44","type":"text","heading":"","plain_text":"cette\n .createFace ("côté-3", 0, taille / -2, 0, -270, 0, 0)\n .appendTo (block);","html":"cette\n .createFace ("côté-3", 0, taille / -2, 0, -270, 0, 0)\n .appendTo (block);
"},{"id":"text-45","type":"text","heading":"","plain_text":"cette\n .createFace ("side-4", taille / -2, 0, 0, 0, -90, 0)\n .appendTo (block);","html":"cette\n .createFace ("side-4", taille / -2, 0, 0, 0, -90, 0)\n .appendTo (block);
"},{"id":"text-46","type":"text","heading":"","plain_text":"cette\n .createFace ("bas", 0, 0, taille / -2, 0, 180, 0)\n .appendTo (block);","html":"cette\n .createFace ("bas", 0, 0, taille / -2, 0, 180, 0)\n .appendTo (block);
"},{"id":"text-47","type":"text","heading":"","plain_text":"J'ai trouvé ce code un peu d'essai et d'erreur (en raison de mon expérience limitée avec la perspective 3D). Chaque élément commence exactement dans la même position que le div.z-axe élément. Autrement dit, dans le centre vertical de la div.block et face au sommet.\nDonc, pour l'élément "top", j'ai dû le traduire "vers le haut" de la moitié de la taille du bloc, mais je n'ai pas eu à le faire pivoter de quelque façon que ce soit. Pour l'élément «bas», j'ai dû le faire pivoter de 180 degrés (le long de l'axe x ou y), et le déplacer de la moitié de la taille du bloc.\nEn utilisant une pensée similaire, j'ai tourné et traduit chacun des côtés restants. J'ai également dû leur ajouter du CSS correspondant:\n.side \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 64px;\n hauteur: 64px;\n visibilité arrière: cachée;\n contour: 1px rgba solide (0, 0, 0, 0,3);","html":"J'ai trouvé ce code un peu d'essai et d'erreur (en raison de mon expérience limitée avec la perspective 3D). Chaque élément commence exactement dans la même position que le div.z-axe élément. Autrement dit, dans le centre vertical de la div.block et face au sommet.\nDonc, pour l'élément "top", j'ai dû le traduire "vers le haut" de la moitié de la taille du bloc, mais je n'ai pas eu à le faire pivoter de quelque façon que ce soit. Pour l'élément «bas», j'ai dû le faire pivoter de 180 degrés (le long de l'axe x ou y), et le déplacer de la moitié de la taille du bloc.\nEn utilisant une pensée similaire, j'ai tourné et traduit chacun des côtés restants. J'ai également dû leur ajouter du CSS correspondant:\n.side \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 64px;\n hauteur: 64px;\n visibilité arrière: cachée;\n contour: 1px rgba solide (0, 0, 0, 0,3);
"},{"id":"text-48","type":"text","heading":"","plain_text":"Ajouter Visibilité arrière: caché empêche le rendu du côté «bas» des éléments. Habituellement, ils semblaient juste les mêmes (seulement en miroir), peu importe la façon dont ils étaient tournés. Avec les faces arrière cachées, seul le côté «supérieur» est rendu. Soyez prudent lors de l'activation: vos surfaces doivent être tournées dans le bon sens ou les côtés du bloc disparaîtront. C’est la raison des rotations 90/270 / -90 / -270 que j’ai données aux côtés.\nVoir le Pen 3D Block Sides by SitePoint (@SitePoint) sur CodePen.\nRendons ce bloc un peu plus réaliste. Nous devons créer un nouveau fichier, appelé block.dirt.jset remplacer la createTexture méthode:\n"utiliser strictement"","html":"Ajouter Visibilité arrière: caché empêche le rendu du côté «bas» des éléments. Habituellement, ils semblaient juste les mêmes (seulement en miroir), peu importe la façon dont ils étaient tournés. Avec les faces arrière cachées, seul le côté «supérieur» est rendu. Soyez prudent lors de l'activation: vos surfaces doivent être tournées dans le bon sens ou les côtés du bloc disparaîtront. C’est la raison des rotations 90/270 / -90 / -270 que j’ai données aux côtés.\nVoir le Pen 3D Block Sides by SitePoint (@SitePoint) sur CodePen.\nRendons ce bloc un peu plus réaliste. Nous devons créer un nouveau fichier, appelé block.dirt.jset remplacer la createTexture méthode:\n"utiliser strictement"
"},{"id":"text-49","type":"text","heading":"","plain_text":"const DIRT_TEXTURES = \n "Haut": [\n \"textures/dirt-top-1.png\",\n \"textures/dirt-top-2.png\",\n \"textures/dirt-top-3.png\"\n ],\n "côté": [\n \"textures/dirt-side-1.png\",\n \"textures/dirt-side-2.png\",\n \"textures/dirt-side-3.png\",\n \"textures/dirt-side-4.png\",\n \"textures/dirt-side-5.png\"\n ]\n;","html":"const DIRT_TEXTURES = \n "Haut": [\n "textures/dirt-top-1.png",\n "textures/dirt-top-2.png",\n "textures/dirt-top-3.png"\n ],\n "côté": [\n "textures/dirt-side-1.png",\n "textures/dirt-side-2.png",\n "textures/dirt-side-3.png",\n "textures/dirt-side-4.png",\n "textures/dirt-side-5.png"\n ]\n;
"},{"id":"text-50","type":"text","heading":"","plain_text":"classe Dirt étend le bloc \n createTexture (type) type === "bottom") \n const texture = DIRT_TEXTURES.top.random ();","html":"classe Dirt étend le bloc \n createTexture (type) type === "bottom") \n const texture = DIRT_TEXTURES.top.random ();
"},{"id":"text-51","type":"text","heading":"","plain_text":" return `url ($ texture)`;\n ","html":"return `url ($ texture)`;\n
"},{"id":"text-52","type":"text","heading":"","plain_text":" const texture = DIRT_TEXTURES.side.random ();","html":"const texture = DIRT_TEXTURES.side.random ();
"},{"id":"text-53","type":"text","heading":"","plain_text":" return `url ($ texture)`;\n ","html":"return `url ($ texture)`;\n
"},{"id":"text-54","type":"text","heading":"","plain_text":"Block.Dirt = Dirt;","html":"Block.Dirt = Dirt;
"},{"id":"text-55","type":"text","heading":"","plain_text":"Nous allons utiliser un pack de texture populaire, appelé Sphax PureBDCraft. Il est gratuit à télécharger et à utiliser (à condition que vous n'essayiez pas de le vendre), et il existe en différentes tailles. J'utilise le x64 version.","html":"Nous allons utiliser un pack de texture populaire, appelé Sphax PureBDCraft. Il est gratuit à télécharger et à utiliser (à condition que vous n'essayiez pas de le vendre), et il existe en différentes tailles. J'utilise le x64 version.
"},{"id":"text-56","type":"text","heading":"","plain_text":"Nous commençons par définir une table de correspondance pour les textures des côtés et du haut du bloc. Le pack de textures ne spécifie pas les textures à utiliser pour le bas, nous allons donc simplement réutiliser les textures du haut.\nSi le côté ayant besoin d'une texture est «haut» ou «bas», alors nous récupérons une texture aléatoire dans la liste «haut». La méthode aléatoire n'existe pas jusqu'à ce que nous la définissions:\nArray.prototype.random = function () \n retourner ceci[Math.floor(Math.random() * this.length)];\n;","html":"Nous commençons par définir une table de correspondance pour les textures des côtés et du haut du bloc. Le pack de textures ne spécifie pas les textures à utiliser pour le bas, nous allons donc simplement réutiliser les textures du haut.\nSi le côté ayant besoin d'une texture est «haut» ou «bas», alors nous récupérons une texture aléatoire dans la liste «haut». La méthode aléatoire n'existe pas jusqu'à ce que nous la définissions:\nArray.prototype.random = function () \n retourner ceci[Math.floor(Math.random() * this.length)];\n;
"},{"id":"text-57","type":"text","heading":"","plain_text":"De même, si nous avons besoin d'une texture pour un côté, nous en récupérons une au hasard. Ces textures sont sans couture, donc la randomisation fonctionne en notre faveur.\nLe résultat devrait ressembler à ceci:\nVoir les textures de bloc 3D Pen par SitePoint (@SitePoint) sur CodePen.\nFaire une scène\nComment rendons-nous cela interactif? Eh bien, un bon endroit pour commencer est avec une scène. Nous avons déjà placé des blocs dans la scène, il ne nous reste plus qu'à activer le placement dynamique!\nPour commencer, nous pouvons rendre une surface plane de blocs:\nconst $ scene = $ (". scene");","html":"De même, si nous avons besoin d'une texture pour un côté, nous en récupérons une au hasard. Ces textures sont sans couture, donc la randomisation fonctionne en notre faveur.\nLe résultat devrait ressembler à ceci:\nVoir les textures de bloc 3D Pen par SitePoint (@SitePoint) sur CodePen.\nFaire une scène\nComment rendons-nous cela interactif? Eh bien, un bon endroit pour commencer est avec une scène. Nous avons déjà placé des blocs dans la scène, il ne nous reste plus qu'à activer le placement dynamique!\nPour commencer, nous pouvons rendre une surface plane de blocs:\nconst $ scene = $ (". scene");
"},{"id":"text-58","type":"text","heading":"","plain_text":"pour (var x = 0; x <6; x ++) \n pour (var y = 0; y <6; y ++) \n let next = new Block.Dirt (x, y, 0);\n next.block.appendTo ($ scene);\n ","html":"pour (var x = 0; x <6; x ++) \n pour (var y = 0; y <6; y ++) \n let next = new Block.Dirt (x, y, 0);\n next.block.appendTo ($ scene);\n
"},{"id":"text-59","type":"text","heading":"","plain_text":"Génial, cela nous donne une surface plane pour commencer à ajouter des blocs. Maintenant, mettons en surbrillance les surfaces lorsque nous les survolons avec notre curseur:\n.block: hover .side \n contour: 1px rgba solide (0, 255, 0, 0,5);","html":"Génial, cela nous donne une surface plane pour commencer à ajouter des blocs. Maintenant, mettons en surbrillance les surfaces lorsque nous les survolons avec notre curseur:\n.block: hover .side \n contour: 1px rgba solide (0, 255, 0, 0,5);
"},{"id":"text-60","type":"text","heading":"","plain_text":"Il se passe cependant quelque chose d'étrange:","html":"Il se passe cependant quelque chose d'étrange:
"},{"id":"text-61","type":"text","heading":"","plain_text":"En effet, les surfaces se coupent de manière aléatoire. Il n'y a pas de bon moyen de résoudre ce problème, mais nous pouvons l'empêcher de se produire en redimensionnant légèrement les blocs:\nconst block = this.block = $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n échelle (0.99)\n "\n );","html":"En effet, les surfaces se coupent de manière aléatoire. Il n'y a pas de bon moyen de résoudre ce problème, mais nous pouvons l'empêcher de se produire en redimensionnant légèrement les blocs:\nconst block = this.block = $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n échelle (0.99)\n "\n );
"},{"id":"text-62","type":"text","heading":"","plain_text":"Bien que cela améliore l'apparence, cela affectera les performances plus il y aura de blocs dans la scène. Marchez légèrement lors de la mise à l'échelle de nombreux éléments à la fois…\nÉtiquetons chaque surface avec le bloc et le type qui lui appartiennent:\ncreateFace (type, x, y, z, rx, ry, rz) \n retourner $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n rotationX ($ rx deg)\n rotationY ($ ry deg)\n rotationZ ($ rz deg)\n ",\n fond: this.createTexture (type)\n )\n .data ("bloquer", ceci)\n .data ("type", type);","html":"Bien que cela améliore l'apparence, cela affectera les performances plus il y aura de blocs dans la scène. Marchez légèrement lors de la mise à l'échelle de nombreux éléments à la fois…\nÉtiquetons chaque surface avec le bloc et le type qui lui appartiennent:\ncreateFace (type, x, y, z, rx, ry, rz) \n retourner $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n rotationX ($ rx deg)\n rotationY ($ ry deg)\n rotationZ ($ rz deg)\n ",\n fond: this.createTexture (type)\n )\n .data ("bloquer", ceci)\n .data ("type", type);
"},{"id":"text-63","type":"text","heading":"","plain_text":"Ensuite, en cliquant sur une surface, nous pouvons dériver un nouvel ensemble de coordonnées et créer un nouveau bloc:\nfunction createCoordinatesFrom (côté, x, y, z) \n if (side == "top") \n z + = 1;\n ","html":"Ensuite, en cliquant sur une surface, nous pouvons dériver un nouvel ensemble de coordonnées et créer un nouveau bloc:\nfunction createCoordinatesFrom (côté, x, y, z) \n if (side == "top") \n z + = 1;\n
"},{"id":"text-64","type":"text","heading":"","plain_text":" si (côté == "côté-1") \n y + = 1;\n ","html":"si (côté == "côté-1") \n y + = 1;\n
"},{"id":"text-65","type":"text","heading":"","plain_text":" si (côté == "côté-2") \n x + = 1;\n ","html":"si (côté == "côté-2") \n x + = 1;\n
"},{"id":"text-66","type":"text","heading":"","plain_text":" si (côté == "côté-3") \n y - = 1;\n ","html":"si (côté == "côté-3") \n y - = 1;\n
"},{"id":"text-67","type":"text","heading":"","plain_text":" si (côté == "côté-4") \n x - = 1;\n ","html":"si (côté == "côté-4") \n x - = 1;\n
"},{"id":"text-68","type":"text","heading":"","plain_text":" si (côté == "bas") \n z - = 1;\n ","html":"si (côté == "bas") \n z - = 1;\n
"},{"id":"text-69","type":"text","heading":"","plain_text":" revenir [x, y, z];","html":"revenir [x, y, z];
"},{"id":"text-70","type":"text","heading":"","plain_text":"const $ body = $ ("corps");","html":"const $ body = $ ("corps");
"},{"id":"text-71","type":"text","heading":"","plain_text":"$ body.on ("clic", ".side", fonction (e) \n const $ this = $ (this);\n const previous = $ this.data ("block");","html":"$ body.on ("clic", ".side", fonction (e) \n const $ this = $ (this);\n const previous = $ this.data ("block");
"},{"id":"text-72","type":"text","heading":"","plain_text":" const coordonnées = createCoordinatesFrom (\n $ this.data ("type"),\n previous.x,\n previous.y,\n previous.z\n );","html":"const coordonnées = createCoordinatesFrom (\n $ this.data ("type"),\n previous.x,\n previous.y,\n previous.z\n );
"},{"id":"text-73","type":"text","heading":"","plain_text":" const suivant = nouveau Block.Dirt (... coordonnées);","html":"const suivant = nouveau Block.Dirt (... coordonnées);
"},{"id":"text-74","type":"text","heading":"","plain_text":" next.block.appendTo ($ scene);\n);","html":"next.block.appendTo ($ scene);\n);
"},{"id":"text-75","type":"text","heading":"","plain_text":"createCoordinatesFrom a une tâche simple mais importante. Compte tenu du type de côté et des coordonnées du bloc auquel il appartient, createCoordinatesFrom devrait renvoyer un nouvel ensemble de coordonnées. C'est là que le nouveau bloc sera placé.\nEnsuite, nous avons joint un écouteur d'événements. Il sera déclenché pour chaque côté div. qui obtient cliqué. Lorsque cela se produit, nous obtenons le bloc auquel appartient le côté et dérivons un nouvel ensemble de coordonnées pour le bloc suivant. Une fois que nous les avons, nous créons le bloc et l'ajoutons à la scène.\nLe résultat est merveilleusement interactif:\nVoir la scène pré-remplie du stylo par SitePoint (@SitePoint) sur CodePen.\nVoir les fantômes\nIl serait utile de voir un aperçu du bloc que nous allons placer avant de le placer. On parle parfois de «montrer un fantôme» de la chose que nous allons faire.\nLe code pour l'activer est assez similaire à celui que nous avons déjà vu:\nlaissez ghost = null;","html":"createCoordinatesFrom a une tâche simple mais importante. Compte tenu du type de côté et des coordonnées du bloc auquel il appartient, createCoordinatesFrom devrait renvoyer un nouvel ensemble de coordonnées. C'est là que le nouveau bloc sera placé.\nEnsuite, nous avons joint un écouteur d'événements. Il sera déclenché pour chaque côté div. qui obtient cliqué. Lorsque cela se produit, nous obtenons le bloc auquel appartient le côté et dérivons un nouvel ensemble de coordonnées pour le bloc suivant. Une fois que nous les avons, nous créons le bloc et l'ajoutons à la scène.\nLe résultat est merveilleusement interactif:\nVoir la scène pré-remplie du stylo par SitePoint (@SitePoint) sur CodePen.\nVoir les fantômes\nIl serait utile de voir un aperçu du bloc que nous allons placer avant de le placer. On parle parfois de «montrer un fantôme» de la chose que nous allons faire.\nLe code pour l'activer est assez similaire à celui que nous avons déjà vu:\nlaissez ghost = null;
"},{"id":"text-76","type":"text","heading":"","plain_text":"fonction removeGhost () \n si (fantôme) \n ghost.block.remove ();\n fantôme = null;\n ","html":"fonction removeGhost () \n si (fantôme) \n ghost.block.remove ();\n fantôme = null;\n
"},{"id":"text-77","type":"text","heading":"","plain_text":"fonction createGhostAt (x, y, z) \n const next = new Block.Dirt (x, y, z);","html":"fonction createGhostAt (x, y, z) \n const next = new Block.Dirt (x, y, z);
"},{"id":"text-78","type":"text","heading":"","plain_text":" next.block\n .addClass ("fantôme")\n .appendTo ($ scene);","html":"next.block\n .addClass ("fantôme")\n .appendTo ($ scene);
"},{"id":"text-79","type":"text","heading":"","plain_text":" fantôme = suivant;","html":"fantôme = suivant;
"},{"id":"text-80","type":"text","heading":"","plain_text":"$ body.on ("mouseenter", ".side", function (e) \n removeGhost ();","html":"$ body.on ("mouseenter", ".side", function (e) \n removeGhost ();
"},{"id":"text-81","type":"text","heading":"","plain_text":" const $ this = jQuery (this);\n const previous = $ this.data ("block");","html":"const $ this = jQuery (this);\n const previous = $ this.data ("block");
"},{"id":"text-82","type":"text","heading":"","plain_text":" const coordonnées = createCoordinatesFrom (\n $ this.data ("type"),\n previous.x,\n previous.y,\n previous.z\n );","html":"const coordonnées = createCoordinatesFrom (\n $ this.data ("type"),\n previous.x,\n previous.y,\n previous.z\n );
"},{"id":"text-83","type":"text","heading":"","plain_text":" createGhostAt (... coordonnées);\n);","html":"createGhostAt (... coordonnées);\n);
"},{"id":"text-84","type":"text","heading":"","plain_text":"$ body.on ("mouseleave", ".side", fonction (e) \n removeGhost ();\n);","html":"$ body.on ("mouseleave", ".side", fonction (e) \n removeGhost ();\n);
"},{"id":"text-85","type":"text","heading":"","plain_text":"La principale différence est que nous conservons une seule instance du bloc fantôme. Au fur et à mesure que chaque nouveau est créé, l'ancien est supprimé. Cela pourrait bénéficier de quelques styles supplémentaires:\n.fantôme \n événements de pointeur: aucun;","html":"La principale différence est que nous conservons une seule instance du bloc fantôme. Au fur et à mesure que chaque nouveau est créé, l'ancien est supprimé. Cela pourrait bénéficier de quelques styles supplémentaires:\n.fantôme \n événements de pointeur: aucun;
"},{"id":"text-86","type":"text","heading":"","plain_text":".ghost .side \n opacité: 0,6;\n événements de pointeur: aucun;\n -filtre Web: luminosité (1,5);","html":".ghost .side \n opacité: 0,6;\n événements de pointeur: aucun;\n -filtre Web: luminosité (1,5);
"},{"id":"text-87","type":"text","heading":"","plain_text":"Laissés actifs, les événements de pointeur associés aux éléments du fantôme contrecarreraient la mouseenter et mouseleave événements du côté en dessous. Comme nous n'avons pas besoin d'interagir avec les éléments fantômes, nous pouvons désactiver ces événements de pointeur.\nCe résultat est plutôt soigné:\nVoir le Pen 3D Block Ghosts de SitePoint (@SitePoint) sur CodePen.\nChanger de perspective\nPlus nous ajoutons d'interactivité, plus il est difficile de voir ce qui se passe. Cela semble être le bon moment pour faire quelque chose à ce sujet. Ce serait génial si nous pouvions zoomer et faire pivoter la fenêtre pour pouvoir voir ce qui se passe un peu mieux…\nCommençons par le zoom. De nombreuses interfaces (et jeux) permettent un zoom dans la fenêtre en faisant défiler la molette de la souris. Différents navigateurs gèrent les événements de la molette de la souris de différentes manières, il est donc judicieux d'utiliser une bibliothèque d'abstraction. \nUne fois installé, nous pouvons nous connecter aux événements:\nlaissez sceneTransformScale = 1;","html":"Laissés actifs, les événements de pointeur associés aux éléments du fantôme contrecarreraient la mouseenter et mouseleave événements du côté en dessous. Comme nous n'avons pas besoin d'interagir avec les éléments fantômes, nous pouvons désactiver ces événements de pointeur.\nCe résultat est plutôt soigné:\nVoir le Pen 3D Block Ghosts de SitePoint (@SitePoint) sur CodePen.\nChanger de perspective\nPlus nous ajoutons d'interactivité, plus il est difficile de voir ce qui se passe. Cela semble être le bon moment pour faire quelque chose à ce sujet. Ce serait génial si nous pouvions zoomer et faire pivoter la fenêtre pour pouvoir voir ce qui se passe un peu mieux…\nCommençons par le zoom. De nombreuses interfaces (et jeux) permettent un zoom dans la fenêtre en faisant défiler la molette de la souris. Différents navigateurs gèrent les événements de la molette de la souris de différentes manières, il est donc judicieux d'utiliser une bibliothèque d'abstraction. \nUne fois installé, nous pouvons nous connecter aux événements:\nlaissez sceneTransformScale = 1;
"},{"id":"text-88","type":"text","heading":"","plain_text":"$ body.on ("molette", fonction (événement) \n if (event.originalEvent.deltaY> 0) \n sceneTransformScale - = 0,05;\n autre \n sceneTransformScale + = 0,05;\n ","html":"$ body.on ("molette", fonction (événement) \n if (event.originalEvent.deltaY> 0) \n sceneTransformScale - = 0,05;\n autre \n sceneTransformScale + = 0,05;\n
"},{"id":"text-89","type":"text","heading":"","plain_text":" $ scene.css (\n "transformer": `\n scaleX ($ sceneTransformScale)\n scaleY ($ sceneTransformScale)\n scaleZ ($ sceneTransformScale)\n "\n );\n);","html":"$ scene.css (\n "transformer": `\n scaleX ($ sceneTransformScale)\n scaleY ($ sceneTransformScale)\n scaleZ ($ sceneTransformScale)\n "\n );\n);
"},{"id":"text-90","type":"text","heading":"","plain_text":"Maintenant, nous pouvons contrôler l'échelle de la scène entière, simplement en faisant défiler la molette de la souris. Malheureusement, au moment où nous le faisons, les rotations sont annulées. Nous devons prendre en compte la rotation, car nous permettons de faire glisser la fenêtre avec la souris pour l'ajuster:\nlaissez sceneTransformX = 60;\nlaissez sceneTransformY = 0;\nlaissez sceneTransformZ = 60;\nlaissez sceneTransformScale = 1;","html":"Maintenant, nous pouvons contrôler l'échelle de la scène entière, simplement en faisant défiler la molette de la souris. Malheureusement, au moment où nous le faisons, les rotations sont annulées. Nous devons prendre en compte la rotation, car nous permettons de faire glisser la fenêtre avec la souris pour l'ajuster:\nlaissez sceneTransformX = 60;\nlaissez sceneTransformY = 0;\nlaissez sceneTransformZ = 60;\nlaissez sceneTransformScale = 1;
"},{"id":"text-91","type":"text","heading":"","plain_text":"const changeViewport = function () \n $ scene.css (\n "transformer": `\n rotationX ($ sceneTransformX deg)\n rotationY ($ sceneTransformY deg)\n rotationZ ($ sceneTransformZ deg)\n scaleX ($ sceneTransformScale)\n scaleY ($ sceneTransformScale)\n scaleZ ($ sceneTransformScale)\n "\n );\n;","html":"const changeViewport = function () \n $ scene.css (\n "transformer": `\n rotationX ($ sceneTransformX deg)\n rotationY ($ sceneTransformY deg)\n rotationZ ($ sceneTransformZ deg)\n scaleX ($ sceneTransformScale)\n scaleY ($ sceneTransformScale)\n scaleZ ($ sceneTransformScale)\n "\n );\n;
"},{"id":"text-92","type":"text","heading":"","plain_text":"Cette fonction ne tient pas seulement compte du facteur d'échelle de la scène, mais également des facteurs de rotation x, y et z. Nous devons également modifier notre écouteur d'événement de zoom:\n$ body.on ("molette", fonction (événement) \n if (event.originalEvent.deltaY> 0) \n sceneTransformScale - = 0,05;\n autre \n sceneTransformScale + = 0,05;\n ","html":"Cette fonction ne tient pas seulement compte du facteur d'échelle de la scène, mais également des facteurs de rotation x, y et z. Nous devons également modifier notre écouteur d'événement de zoom:\n$ body.on ("molette", fonction (événement) \n if (event.originalEvent.deltaY> 0) \n sceneTransformScale - = 0,05;\n autre \n sceneTransformScale + = 0,05;\n
"},{"id":"text-93","type":"text","heading":"","plain_text":" changeViewport ();\n);","html":"changeViewport ();\n);
"},{"id":"text-94","type":"text","heading":"","plain_text":"Maintenant, nous pouvons commencer à faire pivoter la scène. Nous avons besoin:","html":"Maintenant, nous pouvons commencer à faire pivoter la scène. Nous avons besoin:
"},{"id":"text-95","type":"text","heading":"","plain_text":"Un écouteur d'événements pour le début de l'action de glissement\nUn écouteur d'événements lorsque la souris se déplace (tout en faisant glisser)\nUn écouteur d'événements pour quand l'action de glisser s'arrête","html":"Un écouteur d'événements pour le début de l'action de glissement\nUn écouteur d'événements lorsque la souris se déplace (tout en faisant glisser)\nUn écouteur d'événements pour quand l'action de glisser s'arrête
"},{"id":"text-96","type":"text","heading":"","plain_text":"Quelque chose comme ça devrait faire l'affaire:\nNumber.prototype.toInt = String.prototype.toInt = function () \n return parseInt (this, 10);\n;","html":"Quelque chose comme ça devrait faire l'affaire:\nNumber.prototype.toInt = String.prototype.toInt = function () \n return parseInt (this, 10);\n;
"},{"id":"text-97","type":"text","heading":"","plain_text":"laissez lastMouseX = null;\nlaissez lastMouseY = null;","html":"laissez lastMouseX = null;\nlaissez lastMouseY = null;
"},{"id":"text-98","type":"text","heading":"","plain_text":"$ body.on ("mousedown", fonction (e) \n lastMouseX = e.clientX / 10;\n lastMouseY = e.clientY / 10;\n);","html":"$ body.on ("mousedown", fonction (e) \n lastMouseX = e.clientX / 10;\n lastMouseY = e.clientY / 10;\n);
"},{"id":"text-99","type":"text","heading":"","plain_text":"$ body.on ("mousemove", fonction (e) \n si (! lastMouseX) \n revenir;\n ","html":"$ body.on ("mousemove", fonction (e) \n si (! lastMouseX) \n revenir;\n
"},{"id":"text-100","type":"text","heading":"","plain_text":" laissez nextMouseX = e.clientX / 10;\n laissez nextMouseY = e.clientY / 10;","html":"laissez nextMouseX = e.clientX / 10;\n laissez nextMouseY = e.clientY / 10;
"},{"id":"text-101","type":"text","heading":"","plain_text":" if (nextMouseX! == lastMouseX) \n deltaX = nextMouseX.toInt () - lastMouseX.toInt ();\n degrés = sceneTransformZ - deltaX;","html":"if (nextMouseX! == lastMouseX) \n deltaX = nextMouseX.toInt () - lastMouseX.toInt ();\n degrés = sceneTransformZ - deltaX;
"},{"id":"text-102","type":"text","heading":"","plain_text":" si (degrés> 360) \n degrés - = 360;\n ","html":"si (degrés> 360) \n degrés - = 360;\n
"},{"id":"text-103","type":"text","heading":"","plain_text":" si (degrés < 0) \n degrees += 360;","html":"si (degrés < 0) \n degrees += 360;
"},{"id":"text-104","type":"text","heading":"","plain_text":"sceneTransformZ = degrees;\n lastMouseX = nextMouseX;","html":"sceneTransformZ = degrees;\n lastMouseX = nextMouseX;
"},{"id":"text-105","type":"text","heading":"","plain_text":"changeViewport();","html":"changeViewport();
"},{"id":"text-106","type":"text","heading":"","plain_text":"if (nextMouseY !== lastMouseY) \n deltaY = nextMouseY.toInt() - lastMouseY.toInt();\n degrees = sceneTransformX - deltaY;","html":"if (nextMouseY !== lastMouseY) \n deltaY = nextMouseY.toInt() - lastMouseY.toInt();\n degrees = sceneTransformX - deltaY;
"},{"id":"text-107","type":"text","heading":"","plain_text":"if (degrees > 360) \n degrés - = 360;\n ","html":"if (degrees > 360) \n degrés - = 360;\n
"},{"id":"text-108","type":"text","heading":"","plain_text":" si (degrés <0) \n degrés + = 360;\n ","html":"si (degrés <0) \n degrés + = 360;\n
"},{"id":"text-109","type":"text","heading":"","plain_text":" sceneTransformX = degrés;\n lastMouseY = nextMouseY;","html":"sceneTransformX = degrés;\n lastMouseY = nextMouseY;
"},{"id":"text-110","type":"text","heading":"","plain_text":" changeViewport ();\n \n);","html":"changeViewport ();\n \n);
"},{"id":"text-111","type":"text","heading":"","plain_text":"$ body.on ("mouseup", fonction (e) \n lastMouseX = null;\n lastMouseY = null;\n);","html":"$ body.on ("mouseup", fonction (e) \n lastMouseX = null;\n lastMouseY = null;\n);
"},{"id":"text-112","type":"text","heading":"","plain_text":"Sur souris vers le bas nous capturons la souris initiale X et y coordonnées. Lorsque la souris se déplace (si le bouton est toujours enfoncé), nous ajustons la sceneTransformZ et sceneTransformX d'un montant réduit. Il n'y a pas de mal à laisser passer les valeurs 360 degrés ou moins 0 degrés, mais ceux-ci seraient terribles si nous voulions les afficher à l'écran.","html":"Sur souris vers le bas nous capturons la souris initiale X et y coordonnées. Lorsque la souris se déplace (si le bouton est toujours enfoncé), nous ajustons la sceneTransformZ et sceneTransformX d'un montant réduit. Il n'y a pas de mal à laisser passer les valeurs 360 degrés ou moins 0 degrés, mais ceux-ci seraient terribles si nous voulions les afficher à l'écran.
"},{"id":"text-113","type":"text","heading":"","plain_text":"Calcul à l'intérieur d'un déplacer la souris l'écouteur d'événements peut être coûteux en calcul en raison de la quantité de déclencheurs qui peuvent être déclenchés. Il y a potentiellement des millions de pixels sur l'écran, et cet écouteur peut être déclenché lorsque la souris se déplace vers chacun d'eux. C’est pourquoi nous quittons tôt si le bouton de la souris n’est pas maintenu enfoncé.","html":"Calcul à l'intérieur d'un déplacer la souris l'écouteur d'événements peut être coûteux en calcul en raison de la quantité de déclencheurs qui peuvent être déclenchés. Il y a potentiellement des millions de pixels sur l'écran, et cet écouteur peut être déclenché lorsque la souris se déplace vers chacun d'eux. C’est pourquoi nous quittons tôt si le bouton de la souris n’est pas maintenu enfoncé.
"},{"id":"text-114","type":"text","heading":"","plain_text":"Lorsque le bouton de la souris est relâché, nous désactivons lastMouseX et lastMouseY, de sorte que la déplacer la souris l'auditeur arrête de calculer les choses. On pourrait juste effacer lastMouseX, mais effacer les deux me semble plus propre.\nMalheureusement, l'événement mousedown peut interférer avec l'événement click sur les côtés du bloc. Nous pouvons contourner cela en empêchant le bouillonnement des événements:\n$ scene.on ("mousedown", fonction (e) \n e.stopPropagation ();\n);","html":"Lorsque le bouton de la souris est relâché, nous désactivons lastMouseX et lastMouseY, de sorte que la déplacer la souris l'auditeur arrête de calculer les choses. On pourrait juste effacer lastMouseX, mais effacer les deux me semble plus propre.\nMalheureusement, l'événement mousedown peut interférer avec l'événement click sur les côtés du bloc. Nous pouvons contourner cela en empêchant le bouillonnement des événements:\n$ scene.on ("mousedown", fonction (e) \n e.stopPropagation ();\n);
"},{"id":"text-115","type":"text","heading":"","plain_text":"Essayer…\nVoir le zoom et la rotation du stylet par SitePoint (@SitePoint) sur CodePen.\nSuppression de blocs\nComplétons l'expérience en ajoutant la possibilité de supprimer des blocs. Nous devons faire quelques choses subtiles mais importantes:","html":"Essayer…\nVoir le zoom et la rotation du stylet par SitePoint (@SitePoint) sur CodePen.\nSuppression de blocs\nComplétons l'expérience en ajoutant la possibilité de supprimer des blocs. Nous devons faire quelques choses subtiles mais importantes:
"},{"id":"text-116","type":"text","heading":"","plain_text":"Changer la couleur de la bordure de survol du vert au rouge\nDésactivez les fantômes bloqués","html":"Changer la couleur de la bordure de survol du vert au rouge\nDésactivez les fantômes bloqués
"},{"id":"text-117","type":"text","heading":"","plain_text":"Ce sera plus facile à faire avec CSS, tant que nous avons une classe de corps pour indiquer si nous sommes en mode additionnel (normal) ou en mode soustraction:\n$ body.on ("keydown", fonction (e) e.controlKey );","html":"Ce sera plus facile à faire avec CSS, tant que nous avons une classe de corps pour indiquer si nous sommes en mode additionnel (normal) ou en mode soustraction:\n$ body.on ("keydown", fonction (e) e.controlKey );
"},{"id":"text-118","type":"text","heading":"","plain_text":"$ body.on ("keyup", fonction (e) \n $ body.removeClass ("soustraction");\n);","html":"$ body.on ("keyup", fonction (e) \n $ body.removeClass ("soustraction");\n);
"},{"id":"text-119","type":"text","heading":"","plain_text":"Lorsqu'une touche de modification est enfoncée (alt, contrôle, ou commander), ce code s'assurera corps a un soustraction classe. Cela facilite le ciblage de divers éléments à l'aide de cette classe:\n.subtraction .block: hover .side \n contour: 1px rgba solide (255, 0, 0, 0,5);","html":"Lorsqu'une touche de modification est enfoncée (alt, contrôle, ou commander), ce code s'assurera corps a un soustraction classe. Cela facilite le ciblage de divers éléments à l'aide de cette classe:\n.subtraction .block: hover .side \n contour: 1px rgba solide (255, 0, 0, 0,5);
"},{"id":"text-120","type":"text","heading":"","plain_text":".soustraction .ghost \n affichage: aucun;","html":".soustraction .ghost \n affichage: aucun;
"},{"id":"text-121","type":"text","heading":"","plain_text":"Nous recherchons un certain nombre de touches de modification, car différents systèmes d'exploitation interceptent différents modificateurs. Par exemple, touche Alt et metaKey travailler sur macOS, alors que clé de contrôle fonctionne sur Ubuntu.\nSi nous cliquons sur un bloc, lorsque nous sommes en mode soustraction, nous devons le supprimer:\n$ body.on ("clic", ".side", fonction (e) \n const $ this = $ (this);\n const previous = $ this.data ("block");","html":"Nous recherchons un certain nombre de touches de modification, car différents systèmes d'exploitation interceptent différents modificateurs. Par exemple, touche Alt et metaKey travailler sur macOS, alors que clé de contrôle fonctionne sur Ubuntu.\nSi nous cliquons sur un bloc, lorsque nous sommes en mode soustraction, nous devons le supprimer:\n$ body.on ("clic", ".side", fonction (e) \n const $ this = $ (this);\n const previous = $ this.data ("block");
"},{"id":"text-122","type":"text","heading":"","plain_text":" if ($ body.hasClass ("soustraction")) \n previous.block.remove ();\n précédent = null;\n autre \n const coordonnées = createCoordinatesFrom (\n $ this.data ("type"),\n previous.x,\n previous.y,\n previous.z\n );","html":"if ($ body.hasClass ("soustraction")) \n previous.block.remove ();\n précédent = null;\n autre \n const coordonnées = createCoordinatesFrom (\n $ this.data ("type"),\n previous.x,\n previous.y,\n previous.z\n );
"},{"id":"text-123","type":"text","heading":"","plain_text":" const suivant = nouveau Block.Dirt (... coordonnées);\n next.block.appendTo ($ scene);\n \n);","html":"const suivant = nouveau Block.Dirt (... coordonnées);\n next.block.appendTo ($ scene);\n \n);
"},{"id":"text-124","type":"text","heading":"","plain_text":"C'est pareil .côté écouteur d'événements de clic que nous avions auparavant, mais au lieu d'ajouter simplement de nouveaux blocs lorsqu'un côté est cliqué, nous vérifions d'abord si nous sommes en mode de soustraction. Si c'est le cas, le bloc sur lequel nous venons de cliquer est supprimé de la scène.\nLa démo finale\nLa démo finale est merveilleuse pour jouer avec:\nVoir le stylo Suppression de blocs par SitePoint (@SitePoint) sur CodePen.\nIl y a un long chemin à parcourir avant de prendre en charge autant de blocs et d'interactions que Minecraft, mais c'est un bon début. De plus, nous avons réussi à atteindre cet objectif sans avoir à étudier des techniques 3D avancées. C’est une utilisation non conventionnelle (et créative) des transformations CSS!\nSi vous souhaitez en faire plus avec ce code, passez à l'autre moitié de cette aventure. Vous n'avez pas besoin d'être un expert PHP pour interagir avec les serveurs Minecraft. Et imaginez les choses incroyables que vous pouvez faire avec ces connaissances…\nEt n'oubliez pas: ce n'est que la moitié de l'aventure. Si vous souhaitez savoir comment conserver les conceptions sur un serveur réel, consultez la publication sœur, PHP Minecraft Mod. Nous y explorons des moyens d'interagir avec un serveur Minecraft, de le manipuler en temps réel et de répondre aux entrées des utilisateurs.","html":"C'est pareil .côté écouteur d'événements de clic que nous avions auparavant, mais au lieu d'ajouter simplement de nouveaux blocs lorsqu'un côté est cliqué, nous vérifions d'abord si nous sommes en mode de soustraction. Si c'est le cas, le bloc sur lequel nous venons de cliquer est supprimé de la scène.\nLa démo finale\nLa démo finale est merveilleuse pour jouer avec:\nVoir le stylo Suppression de blocs par SitePoint (@SitePoint) sur CodePen.\nIl y a un long chemin à parcourir avant de prendre en charge autant de blocs et d'interactions que Minecraft, mais c'est un bon début. De plus, nous avons réussi à atteindre cet objectif sans avoir à étudier des techniques 3D avancées. C’est une utilisation non conventionnelle (et créative) des transformations CSS!\nSi vous souhaitez en faire plus avec ce code, passez à l'autre moitié de cette aventure. Vous n'avez pas besoin d'être un expert PHP pour interagir avec les serveurs Minecraft. Et imaginez les choses incroyables que vous pouvez faire avec ces connaissances…\nEt n'oubliez pas: ce n'est que la moitié de l'aventure. Si vous souhaitez savoir comment conserver les conceptions sur un serveur réel, consultez la publication sœur, PHP Minecraft Mod. Nous y explorons des moyens d'interagir avec un serveur Minecraft, de le manipuler en temps réel et de répondre aux entrées des utilisateurs.
"},{"id":"text-125","type":"text","heading":"","plain_text":"Christopher est un écrivain et codeur travaillant chez Over. Il travaille généralement sur l'architecture des applications, mais parfois vous le trouverez en train de construire des compilateurs ou des robots.","html":"Christopher est un écrivain et codeur travaillant chez Over. Il travaille généralement sur l'architecture des applications, mais parfois vous le trouverez en train de construire des compilateurs ou des robots.
"},{"id":"text-126","type":"text","heading":"","plain_text":"Click to rate this post!\n \n [Total: 0 Average: 0]","html":"Click to rate this post!\n \n [Total: 0 Average: 0]
"}],"sections":[{"id":"text-1","heading":"Text","content":"Cet article a été révisé par des pairs par Paul O’Brien. Merci à tous les pairs examinateurs de SitePoint pour avoir rendu le contenu SitePoint le meilleur possible!"},{"id":"text-2","heading":"Text","content":"J'ai toujours voulu créer un jeu 3D. Je n'ai tout simplement jamais eu le temps et l'énergie pour apprendre les subtilités de la programmation 3D. J'ai découvert que je n'avais pas besoin de …\nEn bricolant un jour, j'ai pensé que je pourrais peut-être simuler un environnement 3D en utilisant des transformations CSS. Je suis tombé sur un vieil article sur la création de mondes 3D avec HTML et CSS.\nJe voulais simuler un monde Minecraft (ou une infime partie de celui-ci au moins). Minecraft est un jeu de bac à sable, dans lequel vous pouvez casser et placer des blocs. Je voulais le même type de fonctionnalité, mais avec HTML, JavaScript et CSS.\nVenez décrire ce que j'ai appris et comment cela peut vous aider à être plus créatif avec vos transformations CSS!"},{"id":"text-3","heading":"Text","content":"Remarque: La plupart du code de ce didacticiel se trouve sur Github. Je l'ai testé dans la dernière version de Chrome. Je ne peux pas vous promettre que cela aura exactement la même apparence dans d'autres navigateurs, mais les concepts de base sont universels."},{"id":"text-4","heading":"Text","content":"Ce n'est que la moitié de l'aventure. Si vous souhaitez savoir comment conserver les conceptions sur un serveur réel, consultez la publication sœur, PHP Minecraft Mod. Nous y explorons des moyens d'interagir avec un serveur Minecraft, de le manipuler en temps réel et de répondre aux entrées des utilisateurs.\nLes choses que nous faisons déjà\nJ'ai écrit ma juste part de CSS et j'en suis venu à bien le comprendre, dans le but de créer des sites Web. Mais cette compréhension repose sur l'hypothèse que je vais travailler dans un espace 2D.\nPrenons un exemple:\n.outils \n position: absolue;\n gauche: 35px;\n haut: 25px;\n largeur: 200 px;\n hauteur: 400px;\n indice z: 3;"},{"id":"text-5","heading":"Text","content":".Toile \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 100%;\n hauteur: 100%;\n indice z: 2;"},{"id":"text-6","heading":"Text","content":"Ici, nous avons un élément canvas, commençant dans le coin supérieur gauche de la page et s'étendant jusqu'en bas à droite. En plus de cela, nous ajoutons un élément outils. Il commence 25px de gauche et 35px en haut de la page et les mesures 200px large par 400px haute.\nSelon la commande div.tools et div.canvas sont ajoutés au balisage, il est tout à fait possible que div.canvas pourrait se chevaucher div.tools. C'est à l'exception de la z-index styles appliqués à chacun.\nVous êtes probablement habitué à considérer les éléments ainsi conçus comme des surfaces 2D susceptibles de se chevaucher. Mais ce chevauchement est essentiellement une troisième dimension. la gauche, Haut, et z-index peut aussi bien être renommé X, y, et z. Tant que nous supposons que chaque élément a une profondeur fixe de 1px, et z-index a un implicite px unité, nous pensons déjà en termes 3D.\nCertains d'entre nous ont tendance à avoir du mal avec les concepts de rotation et de traduction dans cette troisième dimension…\nLa théorie des transformations\nLes traductions CSS dupliquent cette fonctionnalité familière, dans une API qui dépasse les limites Haut, la gauche, et z-index placer sur nous. Il est possible de remplacer certains de nos styles précédents par des traductions:\n.outils \n position: absolue;\n fond: vert;\n / *\n gauche: 35px;\n haut: 25px;\n * /\n transform-origin: 0 0;\n transformer: traduire (35px, 25px);\n largeur: 200 px;\n hauteur: 400px;\n indice z: 3;"},{"id":"text-7","heading":"Text","content":"Au lieu de définir la gauche et Haut compensations (avec une origine supposée de 0px de gauche et 0px par le haut), nous pouvons déclarer une origine explicite. Nous pouvons effectuer toutes sortes de transformations sur cet élément, pour lesquelles utiliser 0 0 comme centre. traduire (35px, 25px) déplace l'élément 35px à droite et 25px vers le bas. Nous pouvons utiliser des valeurs négatives pour déplacer l'élément vers la gauche et / ou vers le haut.\nAvec la possibilité de définir une origine pour nos transformations, nous pouvons également commencer à faire d'autres choses intéressantes. Par exemple, nous pouvons faire pivoter et mettre à l'échelle des éléments:\ntransform-origin: centre;\ntransformer: l'échelle (0,5) tourne (45 degrés);"},{"id":"text-8","heading":"Text","content":"Chaque élément commence par un défaut transform-origin de 50% 50% 0, mais une valeur de centre ensembles X, y, et z à l'équivalent de 50%. Nous pouvons adapter notre élément à une valeur comprise entre 0 et 1et faites-le pivoter (dans le sens horaire) de degrés ou de radians. Et nous pouvons convertir entre les deux avec:"},{"id":"text-9","heading":"Text","content":"45deg = (45 * Math.PI) / 180 ≅ 0.79rad\n0.79rad = (0,79 * 180) / Math.PI ≅ 45deg"},{"id":"text-10","heading":"Text","content":"Pour faire pivoter un élément dans le sens inverse des aiguilles d'une montre, il suffit d'utiliser un négatif deg ou rad valeur.\nCe qui est encore plus intéressant, à propos de ces transformations, c'est que nous pouvons en utiliser des versions 3D."},{"id":"text-11","heading":"Text","content":"Les navigateurs Evergreen prennent assez bien en charge ces styles, bien qu'ils puissent nécessiter des préfixes de fournisseurs. CodePen a une option "autoprefix" soignée, mais vous pouvez ajouter des bibliothèques comme PostCSS à votre code local pour obtenir la même chose."},{"id":"text-12","heading":"Text","content":"Le premier bloc\nCommençons à créer notre monde 3D. Nous allons commencer par créer un espace dans lequel placer nos blocs. Créez un nouveau fichier, appelé index.html:"},{"id":"text-13","heading":"Text","content":"Ici, nous étirons le corps sur toute la largeur et la hauteur, réinitialisant le rembourrage 0px. Ensuite, nous créons un petit div.scene, que nous utiliserons pour contenir différents blocs. Nous utilisons 50% la gauche et Haut, ainsi qu'une gauche et un haut négatifs marge (égal à la moitié du largeur et la taille) pour le centrer horizontalement et verticalement. Ensuite, nous l'inclinons légèrement (en utilisant la rotation 3D) afin d'avoir une vue en perspective de l'emplacement des blocs."},{"id":"text-14","heading":"Text","content":"Remarquez comment nous définissons style de transformation: préserver-3d. C'est ainsi que les éléments enfants peuvent également être manipulés dans un espace 3D."},{"id":"text-15","heading":"Text","content":"Le résultat devrait ressembler à ceci:\nVoir la scène vide du stylo par SitePoint (@SitePoint) sur CodePen.\nMaintenant, commençons à ajouter une forme de bloc à la scène. Nous devons créer un nouveau fichier JavaScript, appelé block.js:\n"utiliser strictement""},{"id":"text-16","heading":"Text","content":"bloc de classe \n constructeur (x, y, z) \n this.x = x;\n this.y = y;\n this.z = z;"},{"id":"text-17","heading":"Text","content":" this.build ();\n "},{"id":"text-18","heading":"Text","content":" construire() \n // TODO: construire le bloc\n "},{"id":"text-19","heading":"Text","content":" createFace (type, x, y, z, rx, ry, rz) \n // TODO: retourne une face de bloc\n "},{"id":"text-20","heading":"Text","content":" createTexture (type) \n // TODO: obtenez la texture\n "},{"id":"text-21","heading":"Text","content":"Chaque bloc doit avoir une forme 3D à 6 faces. Nous pouvons diviser les différentes parties de la construction en méthodes pour (1) construire le bloc entier, (2) construire chaque surface et (3) obtenir la texture de chaque surface.\nChacun de ces comportements (ou méthodes) est contenu dans une classe ES6. C’est une bonne façon de regrouper les structures de données et les méthodes qui les opèrent ensemble. Vous connaissez peut-être la forme traditionnelle:\nbloc fonction (x, y, z) \n this.x = x;\n this.y = y;\n this.z = z;"},{"id":"text-22","heading":"Text","content":" this.build ();"},{"id":"text-23","heading":"Text","content":"var proto = Block.prototype;"},{"id":"text-24","heading":"Text","content":"proto.build = function () \n // TODO: construire le bloc\n;"},{"id":"text-25","heading":"Text","content":"proto.createFace = fonction (type, x, y, z, rx, ry, rz) \n // TODO: retourne une face de bloc"},{"id":"text-26","heading":"Text","content":"proto.createTexture = fonction (type) \n // TODO: obtenez la texture"},{"id":"text-27","heading":"Text","content":"Cela peut sembler un peu différent, mais c'est à peu près la même chose. En plus d'une syntaxe plus courte, les classes ES6 fournissent également des raccourcis pour étendre les prototypes et appeler les méthodes remplacées. Mais je m'égare…\nTravaillons de bas en haut:\ncreateFace (type, x, y, z, rx, ry, rz) \n retourner $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n rotationX ($ rx deg)\n rotationY ($ ry deg)\n rotationZ ($ rz deg)\n ",\n fond: this.createTexture (type)\n );"},{"id":"text-28","heading":"Text","content":"createTexture (type) \n retour `rgba (100, 100, 255, 0,2)`;"},{"id":"text-29","heading":"Text","content":"Chaque surface (ou face) est constituée d'un div tourné et translaté. Nous ne pouvons pas rendre les éléments plus épais que 1px, mais nous pouvons simuler la profondeur en couvrant tous les trous et en utilisant plusieurs éléments parallèles les uns aux autres. On peut donner au bloc l'illusion de profondeur, même s'il est creux.\nÀ cette fin, le createFace prend un ensemble de coordonnées: X, y, et z pour la position du visage. Nous fournissons également des rotations pour chaque axe, afin que nous puissions appeler createFace avec n'importe quelle configuration et il traduira et fera pivoter le visage comme nous le voulons.\nConstruisons la forme de base:\nconstruire() \n taille const = 64;\n const x = this.x * taille;\n const y = this.y * taille;\n const z = this.z * taille;"},{"id":"text-30","heading":"Text","content":" const block = this.block = $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n "\n );"},{"id":"text-31","heading":"Text","content":" $ (`')\n .appendTo (bloquer)\n .css (\n transformer: `\n rotationX (90deg)\n rotationY (0deg)\n rotationZ (0deg)\n "\n );"},{"id":"text-32","heading":"Text","content":" $ (`')\n .appendTo (bloquer)\n .css (\n transformer: `\n rotationX (0deg)\n rotationY (90deg)\n rotationZ (0deg)\n "\n );"},{"id":"text-33","heading":"Text","content":" $ (`')\n .appendTo (block);"},{"id":"text-34","heading":"Text","content":"Nous avons l'habitude de penser en termes de positions d'un pixel, mais un jeu comme Minecraft fonctionne à plus grande échelle. Chaque bloc est plus grand et le système de coordonnées traite de la position du bloc, pas des pixels individuels qui le composent. Je veux transmettre le même genre d'idée ici…\nLorsque quelqu'un crée un nouveau bloc, à 1 × 2 × 3, Je veux que cela signifie 0px × 64px × 128px. Nous multiplions donc chaque coordonnée par la taille par défaut (dans ce cas 64px, car c'est la taille des textures du pack de textures que nous utiliserons).\nEnsuite, nous créons un conteneur div (que nous appelons div.block). À l'intérieur, nous plaçons encore 3 divisions. Ceux-ci nous montreront l'axe de notre bloc – ils sont comme des guides dans un programme de rendu 3D. Nous devons également ajouter de nouveaux CSS pour notre bloc:\n.bloquer \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 64px;\n hauteur: 64px;\n transformer-style: préserver-3d;\n origine de transformation: 50% 50% 50%;"},{"id":"text-35","heading":"Text","content":"axe .x,\naxe-y,\n.Axe z \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 66px;\n hauteur: 66px;\n origine de transformation: 50% 50% 50%;"},{"id":"text-36","heading":"Text","content":"Axe .x \n bordure: solide 2px rgba (255, 0, 0, 0,3);"},{"id":"text-37","heading":"Text","content":"Axe .y \n bordure: solide 2px rgba (0, 255, 0, 0,3);"},{"id":"text-38","heading":"Text","content":".Axe z \n bordure: solide 2px rgba (0, 0, 255, 0,3);"},{"id":"text-39","heading":"Text","content":"Ce style est similaire à ce que nous avons vu auparavant. Nous devons nous rappeler de définir style de transformation: préserver-3d sur le .bloquer, afin que les axes soient rendus dans leur propre espace 3D. Nous leur donnons une couleur différente et les rendons légèrement plus grands que le bloc dans lequel ils sont contenus. C'est pour qu'ils soient visibles même lorsque le bloc a des côtés.\nCréons un nouveau bloc et ajoutons-le au div.scene:\nlet first = new Block (1, 1, 1);"},{"id":"text-40","heading":"Text","content":"$ (". scene"). append (first.block);"},{"id":"text-41","heading":"Text","content":"Le résultat devrait ressembler à ceci:\nVoir le Pen Basic 3D Block de SitePoint (@SitePoint) sur CodePen.\nMaintenant, ajoutons ces visages:\ncette\n .createFace ("top", 0, 0, size / 2, 0, 0, 0)\n .appendTo (block);"},{"id":"text-42","heading":"Text","content":"cette\n .createFace ("side-1", 0, taille / 2, 0, 270, 0, 0)\n .appendTo (block);"},{"id":"text-43","heading":"Text","content":"cette\n .createFace ("side-2", taille / 2, 0, 0, 0, 90, 0)\n .appendTo (block);"},{"id":"text-44","heading":"Text","content":"cette\n .createFace ("côté-3", 0, taille / -2, 0, -270, 0, 0)\n .appendTo (block);"},{"id":"text-45","heading":"Text","content":"cette\n .createFace ("side-4", taille / -2, 0, 0, 0, -90, 0)\n .appendTo (block);"},{"id":"text-46","heading":"Text","content":"cette\n .createFace ("bas", 0, 0, taille / -2, 0, 180, 0)\n .appendTo (block);"},{"id":"text-47","heading":"Text","content":"J'ai trouvé ce code un peu d'essai et d'erreur (en raison de mon expérience limitée avec la perspective 3D). Chaque élément commence exactement dans la même position que le div.z-axe élément. Autrement dit, dans le centre vertical de la div.block et face au sommet.\nDonc, pour l'élément "top", j'ai dû le traduire "vers le haut" de la moitié de la taille du bloc, mais je n'ai pas eu à le faire pivoter de quelque façon que ce soit. Pour l'élément «bas», j'ai dû le faire pivoter de 180 degrés (le long de l'axe x ou y), et le déplacer de la moitié de la taille du bloc.\nEn utilisant une pensée similaire, j'ai tourné et traduit chacun des côtés restants. J'ai également dû leur ajouter du CSS correspondant:\n.side \n position: absolue;\n gauche: 0;\n en haut: 0;\n largeur: 64px;\n hauteur: 64px;\n visibilité arrière: cachée;\n contour: 1px rgba solide (0, 0, 0, 0,3);"},{"id":"text-48","heading":"Text","content":"Ajouter Visibilité arrière: caché empêche le rendu du côté «bas» des éléments. Habituellement, ils semblaient juste les mêmes (seulement en miroir), peu importe la façon dont ils étaient tournés. Avec les faces arrière cachées, seul le côté «supérieur» est rendu. Soyez prudent lors de l'activation: vos surfaces doivent être tournées dans le bon sens ou les côtés du bloc disparaîtront. C’est la raison des rotations 90/270 / -90 / -270 que j’ai données aux côtés.\nVoir le Pen 3D Block Sides by SitePoint (@SitePoint) sur CodePen.\nRendons ce bloc un peu plus réaliste. Nous devons créer un nouveau fichier, appelé block.dirt.jset remplacer la createTexture méthode:\n"utiliser strictement""},{"id":"text-49","heading":"Text","content":"const DIRT_TEXTURES = \n "Haut": [\n \"textures/dirt-top-1.png\",\n \"textures/dirt-top-2.png\",\n \"textures/dirt-top-3.png\"\n ],\n "côté": [\n \"textures/dirt-side-1.png\",\n \"textures/dirt-side-2.png\",\n \"textures/dirt-side-3.png\",\n \"textures/dirt-side-4.png\",\n \"textures/dirt-side-5.png\"\n ]\n;"},{"id":"text-50","heading":"Text","content":"classe Dirt étend le bloc \n createTexture (type) type === "bottom") \n const texture = DIRT_TEXTURES.top.random ();"},{"id":"text-51","heading":"Text","content":" return `url ($ texture)`;\n "},{"id":"text-52","heading":"Text","content":" const texture = DIRT_TEXTURES.side.random ();"},{"id":"text-53","heading":"Text","content":" return `url ($ texture)`;\n "},{"id":"text-54","heading":"Text","content":"Block.Dirt = Dirt;"},{"id":"text-55","heading":"Text","content":"Nous allons utiliser un pack de texture populaire, appelé Sphax PureBDCraft. Il est gratuit à télécharger et à utiliser (à condition que vous n'essayiez pas de le vendre), et il existe en différentes tailles. J'utilise le x64 version."},{"id":"text-56","heading":"Text","content":"Nous commençons par définir une table de correspondance pour les textures des côtés et du haut du bloc. Le pack de textures ne spécifie pas les textures à utiliser pour le bas, nous allons donc simplement réutiliser les textures du haut.\nSi le côté ayant besoin d'une texture est «haut» ou «bas», alors nous récupérons une texture aléatoire dans la liste «haut». La méthode aléatoire n'existe pas jusqu'à ce que nous la définissions:\nArray.prototype.random = function () \n retourner ceci[Math.floor(Math.random() * this.length)];\n;"},{"id":"text-57","heading":"Text","content":"De même, si nous avons besoin d'une texture pour un côté, nous en récupérons une au hasard. Ces textures sont sans couture, donc la randomisation fonctionne en notre faveur.\nLe résultat devrait ressembler à ceci:\nVoir les textures de bloc 3D Pen par SitePoint (@SitePoint) sur CodePen.\nFaire une scène\nComment rendons-nous cela interactif? Eh bien, un bon endroit pour commencer est avec une scène. Nous avons déjà placé des blocs dans la scène, il ne nous reste plus qu'à activer le placement dynamique!\nPour commencer, nous pouvons rendre une surface plane de blocs:\nconst $ scene = $ (". scene");"},{"id":"text-58","heading":"Text","content":"pour (var x = 0; x <6; x ++) \n pour (var y = 0; y <6; y ++) \n let next = new Block.Dirt (x, y, 0);\n next.block.appendTo ($ scene);\n "},{"id":"text-59","heading":"Text","content":"Génial, cela nous donne une surface plane pour commencer à ajouter des blocs. Maintenant, mettons en surbrillance les surfaces lorsque nous les survolons avec notre curseur:\n.block: hover .side \n contour: 1px rgba solide (0, 255, 0, 0,5);"},{"id":"text-60","heading":"Text","content":"Il se passe cependant quelque chose d'étrange:"},{"id":"text-61","heading":"Text","content":"En effet, les surfaces se coupent de manière aléatoire. Il n'y a pas de bon moyen de résoudre ce problème, mais nous pouvons l'empêcher de se produire en redimensionnant légèrement les blocs:\nconst block = this.block = $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n échelle (0.99)\n "\n );"},{"id":"text-62","heading":"Text","content":"Bien que cela améliore l'apparence, cela affectera les performances plus il y aura de blocs dans la scène. Marchez légèrement lors de la mise à l'échelle de nombreux éléments à la fois…\nÉtiquetons chaque surface avec le bloc et le type qui lui appartiennent:\ncreateFace (type, x, y, z, rx, ry, rz) \n retourner $ (`')\n .css (\n transformer: `\n translateX ($ x px)\n translateY ($ y px)\n translateZ ($ z px)\n rotationX ($ rx deg)\n rotationY ($ ry deg)\n rotationZ ($ rz deg)\n ",\n fond: this.createTexture (type)\n )\n .data ("bloquer", ceci)\n .data ("type", type);"},{"id":"text-63","heading":"Text","content":"Ensuite, en cliquant sur une surface, nous pouvons dériver un nouvel ensemble de coordonnées et créer un nouveau bloc:\nfunction createCoordinatesFrom (côté, x, y, z) \n if (side == "top") \n z + = 1;\n "},{"id":"text-64","heading":"Text","content":" si (côté == "côté-1") \n y + = 1;\n "},{"id":"text-65","heading":"Text","content":" si (côté == "côté-2") \n x + = 1;\n "},{"id":"text-66","heading":"Text","content":" si (côté == "côté-3") \n y - = 1;\n "},{"id":"text-67","heading":"Text","content":" si (côté == "côté-4") \n x - = 1;\n "},{"id":"text-68","heading":"Text","content":" si (côté == "bas") \n z - = 1;\n "},{"id":"text-69","heading":"Text","content":" revenir [x, y, z];"},{"id":"text-70","heading":"Text","content":"const $ body = $ ("corps");"},{"id":"text-71","heading":"Text","content":"$ body.on ("clic", ".side", fonction (e) \n const $ this = $ (this);\n const previous = $ this.data ("block");"},{"id":"text-72","heading":"Text","content":" const coordonnées = createCoordinatesFrom (\n $ this.data ("type"),\n previous.x,\n previous.y,\n previous.z\n );"},{"id":"text-73","heading":"Text","content":" const suivant = nouveau Block.Dirt (... coordonnées);"},{"id":"text-74","heading":"Text","content":" next.block.appendTo ($ scene);\n);"},{"id":"text-75","heading":"Text","content":"createCoordinatesFrom a une tâche simple mais importante. Compte tenu du type de côté et des coordonnées du bloc auquel il appartient, createCoordinatesFrom devrait renvoyer un nouvel ensemble de coordonnées. C'est là que le nouveau bloc sera placé.\nEnsuite, nous avons joint un écouteur d'événements. Il sera déclenché pour chaque côté div. qui obtient cliqué. Lorsque cela se produit, nous obtenons le bloc auquel appartient le côté et dérivons un nouvel ensemble de coordonnées pour le bloc suivant. Une fois que nous les avons, nous créons le bloc et l'ajoutons à la scène.\nLe résultat est merveilleusement interactif:\nVoir la scène pré-remplie du stylo par SitePoint (@SitePoint) sur CodePen.\nVoir les fantômes\nIl serait utile de voir un aperçu du bloc que nous allons placer avant de le placer. On parle parfois de «montrer un fantôme» de la chose que nous allons faire.\nLe code pour l'activer est assez similaire à celui que nous avons déjà vu:\nlaissez ghost = null;"},{"id":"text-76","heading":"Text","content":"fonction removeGhost () \n si (fantôme) \n ghost.block.remove ();\n fantôme = null;\n "},{"id":"text-77","heading":"Text","content":"fonction createGhostAt (x, y, z) \n const next = new Block.Dirt (x, y, z);"},{"id":"text-78","heading":"Text","content":" next.block\n .addClass ("fantôme")\n .appendTo ($ scene);"},{"id":"text-79","heading":"Text","content":" fantôme = suivant;"},{"id":"text-80","heading":"Text","content":"$ body.on ("mouseenter", ".side", function (e) \n removeGhost ();"},{"id":"text-81","heading":"Text","content":" const $ this = jQuery (this);\n const previous = $ this.data ("block");"},{"id":"text-82","heading":"Text","content":" const coordonnées = createCoordinatesFrom (\n $ this.data ("type"),\n previous.x,\n previous.y,\n previous.z\n );"},{"id":"text-83","heading":"Text","content":" createGhostAt (... coordonnées);\n);"},{"id":"text-84","heading":"Text","content":"$ body.on ("mouseleave", ".side", fonction (e) \n removeGhost ();\n);"},{"id":"text-85","heading":"Text","content":"La principale différence est que nous conservons une seule instance du bloc fantôme. Au fur et à mesure que chaque nouveau est créé, l'ancien est supprimé. Cela pourrait bénéficier de quelques styles supplémentaires:\n.fantôme \n événements de pointeur: aucun;"},{"id":"text-86","heading":"Text","content":".ghost .side \n opacité: 0,6;\n événements de pointeur: aucun;\n -filtre Web: luminosité (1,5);"},{"id":"text-87","heading":"Text","content":"Laissés actifs, les événements de pointeur associés aux éléments du fantôme contrecarreraient la mouseenter et mouseleave événements du côté en dessous. Comme nous n'avons pas besoin d'interagir avec les éléments fantômes, nous pouvons désactiver ces événements de pointeur.\nCe résultat est plutôt soigné:\nVoir le Pen 3D Block Ghosts de SitePoint (@SitePoint) sur CodePen.\nChanger de perspective\nPlus nous ajoutons d'interactivité, plus il est difficile de voir ce qui se passe. Cela semble être le bon moment pour faire quelque chose à ce sujet. Ce serait génial si nous pouvions zoomer et faire pivoter la fenêtre pour pouvoir voir ce qui se passe un peu mieux…\nCommençons par le zoom. De nombreuses interfaces (et jeux) permettent un zoom dans la fenêtre en faisant défiler la molette de la souris. Différents navigateurs gèrent les événements de la molette de la souris de différentes manières, il est donc judicieux d'utiliser une bibliothèque d'abstraction. \nUne fois installé, nous pouvons nous connecter aux événements:\nlaissez sceneTransformScale = 1;"},{"id":"text-88","heading":"Text","content":"$ body.on ("molette", fonction (événement) \n if (event.originalEvent.deltaY> 0) \n sceneTransformScale - = 0,05;\n autre \n sceneTransformScale + = 0,05;\n "},{"id":"text-89","heading":"Text","content":" $ scene.css (\n "transformer": `\n scaleX ($ sceneTransformScale)\n scaleY ($ sceneTransformScale)\n scaleZ ($ sceneTransformScale)\n "\n );\n);"},{"id":"text-90","heading":"Text","content":"Maintenant, nous pouvons contrôler l'échelle de la scène entière, simplement en faisant défiler la molette de la souris. Malheureusement, au moment où nous le faisons, les rotations sont annulées. Nous devons prendre en compte la rotation, car nous permettons de faire glisser la fenêtre avec la souris pour l'ajuster:\nlaissez sceneTransformX = 60;\nlaissez sceneTransformY = 0;\nlaissez sceneTransformZ = 60;\nlaissez sceneTransformScale = 1;"},{"id":"text-91","heading":"Text","content":"const changeViewport = function () \n $ scene.css (\n "transformer": `\n rotationX ($ sceneTransformX deg)\n rotationY ($ sceneTransformY deg)\n rotationZ ($ sceneTransformZ deg)\n scaleX ($ sceneTransformScale)\n scaleY ($ sceneTransformScale)\n scaleZ ($ sceneTransformScale)\n "\n );\n;"},{"id":"text-92","heading":"Text","content":"Cette fonction ne tient pas seulement compte du facteur d'échelle de la scène, mais également des facteurs de rotation x, y et z. Nous devons également modifier notre écouteur d'événement de zoom:\n$ body.on ("molette", fonction (événement) \n if (event.originalEvent.deltaY> 0) \n sceneTransformScale - = 0,05;\n autre \n sceneTransformScale + = 0,05;\n "},{"id":"text-93","heading":"Text","content":" changeViewport ();\n);"},{"id":"text-94","heading":"Text","content":"Maintenant, nous pouvons commencer à faire pivoter la scène. Nous avons besoin:"},{"id":"text-95","heading":"Text","content":"Un écouteur d'événements pour le début de l'action de glissement\nUn écouteur d'événements lorsque la souris se déplace (tout en faisant glisser)\nUn écouteur d'événements pour quand l'action de glisser s'arrête"},{"id":"text-96","heading":"Text","content":"Quelque chose comme ça devrait faire l'affaire:\nNumber.prototype.toInt = String.prototype.toInt = function () \n return parseInt (this, 10);\n;"},{"id":"text-97","heading":"Text","content":"laissez lastMouseX = null;\nlaissez lastMouseY = null;"},{"id":"text-98","heading":"Text","content":"$ body.on ("mousedown", fonction (e) \n lastMouseX = e.clientX / 10;\n lastMouseY = e.clientY / 10;\n);"},{"id":"text-99","heading":"Text","content":"$ body.on ("mousemove", fonction (e) \n si (! lastMouseX) \n revenir;\n "},{"id":"text-100","heading":"Text","content":" laissez nextMouseX = e.clientX / 10;\n laissez nextMouseY = e.clientY / 10;"},{"id":"text-101","heading":"Text","content":" if (nextMouseX! == lastMouseX) \n deltaX = nextMouseX.toInt () - lastMouseX.toInt ();\n degrés = sceneTransformZ - deltaX;"},{"id":"text-102","heading":"Text","content":" si (degrés> 360) \n degrés - = 360;\n "},{"id":"text-103","heading":"Text","content":" si (degrés < 0) \n degrees += 360;"},{"id":"text-104","heading":"Text","content":"sceneTransformZ = degrees;\n lastMouseX = nextMouseX;"},{"id":"text-105","heading":"Text","content":"changeViewport();"},{"id":"text-106","heading":"Text","content":"if (nextMouseY !== lastMouseY) \n deltaY = nextMouseY.toInt() - lastMouseY.toInt();\n degrees = sceneTransformX - deltaY;"},{"id":"text-107","heading":"Text","content":"if (degrees > 360) \n degrés - = 360;\n "},{"id":"text-108","heading":"Text","content":" si (degrés <0) \n degrés + = 360;\n "},{"id":"text-109","heading":"Text","content":" sceneTransformX = degrés;\n lastMouseY = nextMouseY;"},{"id":"text-110","heading":"Text","content":" changeViewport ();\n \n);"},{"id":"text-111","heading":"Text","content":"$ body.on ("mouseup", fonction (e) \n lastMouseX = null;\n lastMouseY = null;\n);"},{"id":"text-112","heading":"Text","content":"Sur souris vers le bas nous capturons la souris initiale X et y coordonnées. Lorsque la souris se déplace (si le bouton est toujours enfoncé), nous ajustons la sceneTransformZ et sceneTransformX d'un montant réduit. Il n'y a pas de mal à laisser passer les valeurs 360 degrés ou moins 0 degrés, mais ceux-ci seraient terribles si nous voulions les afficher à l'écran."},{"id":"text-113","heading":"Text","content":"Calcul à l'intérieur d'un déplacer la souris l'écouteur d'événements peut être coûteux en calcul en raison de la quantité de déclencheurs qui peuvent être déclenchés. Il y a potentiellement des millions de pixels sur l'écran, et cet écouteur peut être déclenché lorsque la souris se déplace vers chacun d'eux. C’est pourquoi nous quittons tôt si le bouton de la souris n’est pas maintenu enfoncé."},{"id":"text-114","heading":"Text","content":"Lorsque le bouton de la souris est relâché, nous désactivons lastMouseX et lastMouseY, de sorte que la déplacer la souris l'auditeur arrête de calculer les choses. On pourrait juste effacer lastMouseX, mais effacer les deux me semble plus propre.\nMalheureusement, l'événement mousedown peut interférer avec l'événement click sur les côtés du bloc. Nous pouvons contourner cela en empêchant le bouillonnement des événements:\n$ scene.on ("mousedown", fonction (e) \n e.stopPropagation ();\n);"},{"id":"text-115","heading":"Text","content":"Essayer…\nVoir le zoom et la rotation du stylet par SitePoint (@SitePoint) sur CodePen.\nSuppression de blocs\nComplétons l'expérience en ajoutant la possibilité de supprimer des blocs. Nous devons faire quelques choses subtiles mais importantes:"},{"id":"text-116","heading":"Text","content":"Changer la couleur de la bordure de survol du vert au rouge\nDésactivez les fantômes bloqués"},{"id":"text-117","heading":"Text","content":"Ce sera plus facile à faire avec CSS, tant que nous avons une classe de corps pour indiquer si nous sommes en mode additionnel (normal) ou en mode soustraction:\n$ body.on ("keydown", fonction (e) e.controlKey );"},{"id":"text-118","heading":"Text","content":"$ body.on ("keyup", fonction (e) \n $ body.removeClass ("soustraction");\n);"},{"id":"text-119","heading":"Text","content":"Lorsqu'une touche de modification est enfoncée (alt, contrôle, ou commander), ce code s'assurera corps a un soustraction classe. Cela facilite le ciblage de divers éléments à l'aide de cette classe:\n.subtraction .block: hover .side \n contour: 1px rgba solide (255, 0, 0, 0,5);"},{"id":"text-120","heading":"Text","content":".soustraction .ghost \n affichage: aucun;"},{"id":"text-121","heading":"Text","content":"Nous recherchons un certain nombre de touches de modification, car différents systèmes d'exploitation interceptent différents modificateurs. Par exemple, touche Alt et metaKey travailler sur macOS, alors que clé de contrôle fonctionne sur Ubuntu.\nSi nous cliquons sur un bloc, lorsque nous sommes en mode soustraction, nous devons le supprimer:\n$ body.on ("clic", ".side", fonction (e) \n const $ this = $ (this);\n const previous = $ this.data ("block");"},{"id":"text-122","heading":"Text","content":" if ($ body.hasClass ("soustraction")) \n previous.block.remove ();\n précédent = null;\n autre \n const coordonnées = createCoordinatesFrom (\n $ this.data ("type"),\n previous.x,\n previous.y,\n previous.z\n );"},{"id":"text-123","heading":"Text","content":" const suivant = nouveau Block.Dirt (... coordonnées);\n next.block.appendTo ($ scene);\n \n);"},{"id":"text-124","heading":"Text","content":"C'est pareil .côté écouteur d'événements de clic que nous avions auparavant, mais au lieu d'ajouter simplement de nouveaux blocs lorsqu'un côté est cliqué, nous vérifions d'abord si nous sommes en mode de soustraction. Si c'est le cas, le bloc sur lequel nous venons de cliquer est supprimé de la scène.\nLa démo finale\nLa démo finale est merveilleuse pour jouer avec:\nVoir le stylo Suppression de blocs par SitePoint (@SitePoint) sur CodePen.\nIl y a un long chemin à parcourir avant de prendre en charge autant de blocs et d'interactions que Minecraft, mais c'est un bon début. De plus, nous avons réussi à atteindre cet objectif sans avoir à étudier des techniques 3D avancées. C’est une utilisation non conventionnelle (et créative) des transformations CSS!\nSi vous souhaitez en faire plus avec ce code, passez à l'autre moitié de cette aventure. Vous n'avez pas besoin d'être un expert PHP pour interagir avec les serveurs Minecraft. Et imaginez les choses incroyables que vous pouvez faire avec ces connaissances…\nEt n'oubliez pas: ce n'est que la moitié de l'aventure. Si vous souhaitez savoir comment conserver les conceptions sur un serveur réel, consultez la publication sœur, PHP Minecraft Mod. Nous y explorons des moyens d'interagir avec un serveur Minecraft, de le manipuler en temps réel et de répondre aux entrées des utilisateurs."},{"id":"text-125","heading":"Text","content":"Christopher est un écrivain et codeur travaillant chez Over. Il travaille généralement sur l'architecture des applications, mais parfois vous le trouverez en train de construire des compilateurs ou des robots."},{"id":"text-126","heading":"Text","content":"Click to rate this post!\n \n [Total: 0 Average: 0]"}],"media":{"primary_image":"https://tutos-gameserver.fr/wp-content/uploads/2020/02/icon.javascript.png"},"relations":[{"rel":"canonical","href":"https://tutos-gameserver.fr/2020/02/09/creation-dun-editeur-javascript-minecraft-3d-sitepoint-un-bon-serveur-minecraft/"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2020/02/09/creation-dun-editeur-javascript-minecraft-3d-sitepoint-un-bon-serveur-minecraft/llm","type":"text/html"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2020/02/09/creation-dun-editeur-javascript-minecraft-3d-sitepoint-un-bon-serveur-minecraft/llm.json","type":"application/json"},{"rel":"llm-manifest","href":"https://tutos-gameserver.fr/llm-endpoints-manifest.json","type":"application/json"}],"http_headers":{"X-LLM-Friendly":"1","X-LLM-Schema":"1.1.0","Content-Security-Policy":"default-src 'none'; img-src * data:; style-src 'unsafe-inline'"},"license":"CC BY-ND 4.0","attribution_required":true,"allow_cors":false}