Comment utiliser WebGL de H5 pour implémenter une animation itinérante dans une salle informatique virtuelle 3D

Cette fois, je vais vous montrer comment utiliser le WebGL de H5 pour réaliser l'animation itinérante de la salle informatique virtuelle 3Danimation Quelles sont les précautions concernant l'utilisation du WebGL de H5 pour réaliser le. animation itinérante de la salle informatique virtuelle 3D, ce qui suit est un cas pratique, jetons un oeil.

L'utilisation de la première personne en 3D doit faire référence à l'utilisation de la première personne dans les jeux de tir. Les jeux de tir à la première personne (FPS) sont un type de jeu vidéo basé sur la perspective à la première personne et s'articulent autour de cela. des armes à feu et d'autres armes ; c'est-à-dire que les joueurs vivent l'action à travers les yeux du protagoniste. Depuis la création du genre, les graphismes 3D et pseudo-3D avancés ont remis en question le développement du matériel, et le jeu multijoueur est devenu indispensable.

De nos jours, les musées ou les entreprises utilisent souvent l'animation 3D pour réaliser des vidéos promotionnelles, etc. Le plus grand avantage de l'interprétation de l'animation 3D est qu'elle donne aux gens une réelle impression en termes de contenu et de forme. Elle est plus intuitive que les œuvres graphiques et plus réaliste que l'animation 2D, elle peut donc donner aux téléspectateurs le sentiment d'être dans l'environnement publicitaire, améliorant ainsi considérablement le pouvoir de persuasion de la publicité. Le développement de la technologie 3D remet même en question la capacité du public à faire la distinction, ce qui fait dériver son jugement entre le virtuel et la réalité.
De plus, l'application d'effets spéciaux 3D offre un espace de réflexion plus large pour la créativité, devient une garantie fiable pour l'exécution créative et enrichit la forme et le style de la créativité. Selon l'attrait du thème publicitaire, une atmosphère onirique et magique peut être créée pour stimuler et impressionner le public, atteignant ainsi l'objectif de communication avec le public.
La vidéo promotionnelle animée en 3D combine une animation 3D, des effets spéciaux, des vidéos d'entreprise, des photos, des perspectives d'avenir et d'autres contenus via une synthèse de post-production, un doublage et une narration pour former une publicité d'entreprise intuitive, vivante et populaire de haute qualité. vidéo pour faire une différence dans la société. Les personnes à ce niveau ont une impression positive, positive et bonne de l'entreprise, établissant ainsi la bonne volonté et la confiance dans l'entreprise et faisant confiance aux produits ou services de l'entreprise.

Le fait que la 3D se développe si rapidement aujourd’hui est dû à la quête de la « réalité » par l’humanité. Apprendre à bien utiliser la 3D est donc un élément essentiel du succès futur.

L'idée de l'exemple de cet article est d'entrer dans une salle informatique pour une visite. L'action d'ouvrir la porte ne peut pas être plus dynamique. Couplée à des virages appropriés, elle simule fondamentalement complètement l'effet des personnes. visiter une salle informatique. Un autre avantage est que si vous souhaitez le démontrer à votre patron sans avoir à le faire fonctionner, votre patron sera très satisfait de cet effet sympa !

Les boutons "reset" et "start" de l'interface sont des boutons ajoutés directement au corps, et les événements de clic sont ajoutés à ces deux boutons :

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

La scène entière est construite à partir de composants 3D encapsulés par HT. Construire une scène aussi grande nécessite une certaine quantité de code. Pour simplifier, j'ai sorti la scène séparément et utilisé la classe ht.JSONSerializer encapsulée par HT pour sérialiser la scène en json. json est introduit. Afin de rendre les choses plus claires, permettez-moi de donner un exemple ici, en supposant que la scène 3D a été construite :

dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//.......构建好场景dm.serialize();//可以填入number参数，作为空格缩进值

Maintenant que nous avons configuré l'environnement, convertissez-le en json. Le fichier est difficile à contrôler dans le code. Dans ce cas, nous allons désérialiser les données DataModelmodèle. La fonction de cette fonction est de convertir le format json en objet et de convertir le fichier. L'objet désérialisé est transmis au modèle de données DataModel. Pour plus de détails, veuillez vous référer au manuel de sérialisation HT for Web :

var g3d = window.g3d = new ht.graph3d.Graph3dView(),   
dataModel = g3d.dm(),   
view = g3d.getView(),   
path = null;g3d.setMovableFunc(function(data) {    return false;});
g3d.setVisibleFunc(function(data) {   
if (data.getName() === "path") {      
 return false;   
}   
return true;});
g3d.setEye([523, 5600, 8165]);g3d.setFar(60000);dataModel.deserialize(json);

Nous devons actuellement exploiter la "porte" dans le scénario, et l'itinéraire que nous allons suivre. prendre." path", parcourir le modèle de données DataModel, et obtenir ces deux données :

for (var i = 0; i < dataModel.size(); i++) {   
var data = dataModel.getDatas().get(i);  
 if (data.getName() === "门")
{//json中设置的名称      
window.door = data;   
}   
if (data.getName() === "path")
{       
path = data;   
}   
if (window.door && path)
{//获取到door 和 path 的data之后就跳出循环       
break;  
 }}

Dans cet exemple, il y a simplement quatre actions, "reset" pour revenir à l'origine, "start action" , "à "Avancer", "Arrêter". Cliquez sur le bouton "Démarrer". Dans "Démarrer l'action", nous effectuons une seule action, l'action "Ouvrir la porte". Une fois l'action terminée, appelez la fonction "avancer" pour avancer :

function startAnim() {
    
if (window.isAnimationRunning)
{       
return;  
 }   
reset();   
window.isAnimationRunning = true;//动画是否正在进行    ht.Default.startAnim({      
 frames: 30, // 动画帧数，默认采用`ht.Default.animFrames`。       
interval: 20, // 动画帧间隔，默认采用`ht.Default.animInterval`。          
finishFunc: function() {// 动画结束后调用的函数。           
forward();       
},        
action: function(t){ // action函数必须提供，实现动画过程中的属性变化。           
door.setRotationY(-120 * Math.PI / 180 * t);       
}   
});
}

Le "reset" ici "La fonction est la fonction de "réinitialisation" au point d'origine. Nous utilisons cette fonction pour restaurer toutes les modifications à la position d'origine, y compris la position de la "porte" :

function reset()
{   
if (window.isAnimationRunning)
{       
return;   
}   
g3d.setCenter([0,0,0]);   
g3d.setEye([523, 5600, 8165]);    window.forwardIndex = 0;  
 door.setRotationY(0);}

Pour "bouger", définitivement Le "chemin" sur lequel nous devons marcher, c'est-à-dire le "chemin" que nous venons d'obtenir, obtient tous les éléments du "chemin" via window.points = path.getPoints()._as; et initialise window.forwardIndex = 0 ; en contrôlant " path " pour définir l'Œil et le Centre dans la scène 3D, de manière à créer un effet selon lequel nous sommes la première personne

var point1 = points[forwardIndex],   
 point2 = points[forwardIndex + 1];var distanceX = (point2.x - point1.x),    
distanceY = (point2.y - point1.y),    
distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY)-200;//两点之间的距离通过三角形勾股定理计算 怕碰墙所以-200g3d.setEye([point1.x, 1600, point1.y]);//眼睛g3d.setCenter([point2.x, 1600, point2.y]);//我

Le composant 3D dans HT a une méthode walk(step, anim, firstPersonMode ), cette fonction change les positions de l'œil et du centre en même temps, c'est-à-dire que l'œil et le centre se déplacent du même décalage dans la direction vectorielle établie par les deux points en même temps. step est la valeur de longueur du vecteur de décalage. Lorsque le paramètre firstPersonMode est vide, la valeur actuelle de Graph3dView#isFirstPersonMode() est utilisée par défaut. Si l'opération de marche est appelée pour le mode à la première personne, cette fonction prendra en compte les restrictions de limites de Graph3dView#getBoundaries().

g3d.walk(distance, {   
frames: 50,   
interval: 30,   
easing: function(t) {return t; },   
finishFunc: function() {       
forwardIndex += 1;       
if (points.length - 2 > forwardIndex) {//points.length = 5            g3d.setCenter([point2.x, 1600, point2.y]);//把结束点变成起始点           
g3d.rotate(Math.PI / 2, 0, {              
 frames: 30,             
  interval: 30,              
 easing: function(t) {return t;},                finishFunc:function() { forward();}          
 });     
  }
else
{           
var lastPoint = points[points.length  - 1];//json 中path的points 的最后一个点          
 g3d.setCenter([lastPoint.x, 1400, lastPoint.y]);           
g3d.rotate(-Math.PI / 2, 0,
{              
 frames: 30,              
 interval: 30,              
 finishFunc: function()
{                   
window.isAnimationRunning = false;              
 }          
 });      
 }   
}});

不管“path”的点有多少个，这个判断语句还是能运作，只在最后一个点是跳出 finishFunc 动画结束后调用的函数，并将 window.isAnimationRunning 值设为 false 停止 startAnim 函数。如果不是最后一个点，用户“旋转”之后，回调 forward 函数。至此，全部代码解释完毕，很短的代码量，却做出了这么大的工程！

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

手机端怎样用rem+scss做适配

canvas如何实现github404动态

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!