Animation itinérante basée sur la machine virtuelle 3D basée sur HTML5.

L'utilisation de la première personne en 3D devrait se référer à l'utilisation de la première personne dans le jeu de tir. Depuis le début du genre, les graphiques avancés 3D et pseudo -3D ont contesté le développement matériel, et les jeux multijoueurs sont indispensables.

Capture d'écran de Doom, l'un des jeux révolutionnaires de ce genre, montre la perspective typique du premier jeu de tir à personne

Désormais, le musée ou l'entreprise utilise également souvent une animation 3D pour les films promotionnels, etc. Le plus grand avantage de l'interprétation de l'animation 3D est le véritable sentiment de contenu et de forme. Il est plus intuitif que les œuvres graphiques, et il est plus réel que l'animation 2D, il peut donc donner aux téléspectateurs plus de sentiments dans l'environnement publicitaire, améliorant considérablement la persuasion de la publicité. Le développement de la technologie 3D remet même en question la capacité de réciprocité du public, afin que le jugement du public soit séparé du virtuel et de la réalité.

De plus, l'application des effets spéciaux 3D offre un espace de réflexion plus large pour la créativité, devient une garantie fiable pour la mise en œuvre créative et enrichit la forme et le style de créativité. Selon la performance du thème de la publicité, une atmosphère rêveuse et magique peut être créée pour stimuler et déplacer le public, jouant ainsi le but de communiquer avec le public.

Les vidéos promotionnelles de l'animation 3D formeront une animation 3D, des effets spéciaux, une vidéo d'entreprise, des photos, des prospects futurs et d'autres contenus. et faites confiance aux produits ou services de l'entreprise.

Maintenant que le lieu du développement 3D est si rapide, vous devez également remercier les humains pour leur poursuite de la réalité, donc l'apprentissage et l'utilisation de la 3D sont une partie indispensable du succès futur.

L'exemple de cet article est d'entrer dans une salle de machine à visiter. Un autre avantage est que si vous voulez le démontrer au leader sans opérer, ce leader à effet cool sera très satisfait!

http://www.hightopo.com/demo/room-walkthrough/index.html

Les deux boutons de l'interface sont deux boutons qui sont directement ajoutés au corps du corps, et l'événement de clic est ajouté à ces deux boutons:

 <div> </div> <div> </div>

La scène entière est formée par le composant 3D encapsulé par HT. Le fichier JSON généré a été introduit dans le code.

 dm = new ht.datamodel (); g3d = new ht.graph3d.graph3dview (dm); Paramètre comme une valeur parallèle de rétrécissement de l'espace

Maintenant que nous avons configuré un bon environnement et converti en fichiers JSON, le code n'est pas facile à contrôler. , veuillez vous référer au manuel HT pour la sérialisation Web:

 var g3d = window.g3d = new ht.graph3d.graph3dview (), dataModel = g3d.dm (), vue = g3d.getView (), path = null;) {return false;}); data) {if (data.getName ()) {return false;} return true;}); g3d.seye ([523, 5600]);

Nous avons actuellement besoin de la porte de la scène de l'opération, ainsi que du chemin que nous allons suivre, traversez le modèle de données DataModel pour obtenir ces deux données:

 pour (var i = 0; i <datamodel.size (); i ++) {var data = dataModel.getDatas (). Le nom window.door = data;} if (data.getName () == path) {path = data;} if (window.door && path) {// Après avoir obtenu les données de la porte et du chemin, sautez hors du Cycle Break;}}

Dans cet exemple, il n'y a que quatre actions en termes de réinitialisation à l'origine, à démarrer les mouvements, à avancer et à l'arrêt. Cliquez sur le bouton Démarrer.

 Fonction startanim () {if (window.isanimationRunning) {return;} réset (); Adoption par défaut `Ht.Default.anImFames. processus.

La fonction de réinitialisation ici est la fonction de réinitialiser à l'origine. Nous pouvons restaurer la position initiale de tous les changements à travers cette fonction, y compris la position de la porte:

 Fonction reset () {if (window.isanimationRunning) {return;} g3d.setCenter ([0,0,0]); G3d.seTeye ([523, 5600, 8165]);

Pour se déplacer, le chemin qui doit être la marche doit être, c'est-à-dire le chemin que nous venons d'obtenir, via Window.points = path.getpoints () ._ comme; Deux points sont prêts à définir l'œil et le centre dans des scènes 3D, afin que nous puissions créer un effet de notre première personne: nous sommes la première personne:

 Var Point1 = points [usinedx], point2 = points [ForwardIndex + 1]; * Distance + Distance * Distance) -200; // La distance entre les deux points est calculée par le théorème du triangle de Pyrothebto, j'ai donc peur de toucher le mur. // Je suis

Les composants 3D en HT ont une méthode Walk (Step, Anim, FirstPersonMode), qui modifie également les positions de l'œil et du centre en même temps, c'est-à-dire que les yeux et le centre déplacent le même décalage en même temps dans la direction établie par le Deux points. L'étape est la valeur de longueur du vecteur du décalage. Lorsque le paramètre FirstSersonMode est vide, la valeur actuelle est utilisée par graph3dview # isFirstSersonMode ().

 G3d.Walk (Distance, {Frames: 50, Interval: 30, Soupage: fonction (t) {return t;}, finadFunc: function () {ForwardIndex + = 1; if (PointS.Length- 2> f orwardIndex) { // /point.length = 5 g3d.setCenter: 30, aspiration: fonction (t) {return t;}, finadFunc: function () {ulmal ]] Le chemin de JSON est le dernier point de points g3d.setCenter Window.isanimationRunning = false;}});}}});

Peu importe le point de vue de Path, cette déclaration de jugement peut toujours être opérée. Si ce n'est pas le dernier point, une fois l'utilisateur tourné, la fonction avant est rappelée. À ce stade, tout le code est expliqué et la quantité de code est courte, mais elle a fait un si grand projet!

Ce qui précède est une animation itinérante basée sur la salle virtuelle 3D basée sur le HTML5 que je vous ai présenté. dans le temps. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!