HTML5-based Web GL classic 3D virtual machine room roaming animation,

HTML5-based Web GL classic 3D virtual machine room roaming animation,

The usage of the first person in 3D should refer to the use of the first person in the shooting game, and the first person in the shooting game (FPS) this is a first-person video game type centered around guns and other weapons. That is to say, players can experience the action through the eyes of the main character. Since the beginning of the genre, advanced 3D and pseudo 3D graphics have posed challenges to the development of hardware, and multiplayer games are indispensable.

Doom, one of the breakthrough games of this genre, shows a typical perspective of the first-person shooting game

At present, museums or companies often use 3D animation for promotional films. The biggest advantage of 3D animation deduction lies in the true feelings of content and form. It is more intuitive than a graphic file and more realistic than a 2D animation, so it can give viewers a feeling in the advertising environment, greatly enhancing the persuasiveness of advertising. The development of 3D technology even challenges the audience's ability to distinguish, so that the audience's judgment is separated from virtual and real.
In addition, the application of 3D Special Effects provides a broader space for creative thinking and becomes a reliable guarantee for creative execution. It also enriches creative forms and styles. Based on the performance requirements of the AD themes, a fantastic and magical atmosphere can be created to stimulate and impress the audience, thus serving the purpose of communicating with the audience.
3D animated video clips form an intuitive, vivid, and appealing enterprise Advertising video by means of post-synthesis, dubbing, and commenting on 3D animation, special effects, corporate videos, photos, and future prospects, let people of different levels of society have a positive, positive, and good impression on the enterprise, so as to establish a good feeling and trust for the enterprise, and trust the enterprise's products or services.

Now, with the rapid development of 3D, we also need to thank humanity for its pursuit of "reality". Learning 3D well is an essential part of future success.

In this example, the idea is to enter a data center to visit, and the door opening is completely inactive, coupled with proper turns, basically completely simulating the effect of people visiting the data center. Another advantage is that if you want to demonstrate it to the leaders without having to perform any operations, the leaders will be satisfied with this cool effect!

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

The "reset" and "start" buttons on the interface are directly added to the buttons in the body and the click events are added to the buttons:

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

The entire scenario is built by the 3D components encapsulated by HT. To simplify the process, we need a certain amount of code to construct such a large scenario. In this case, we take the scenario out separately and use the HT encapsulated by ht. the JSONSerializer class serializes the scenario into json. Only the generated json file is introduced in the Code. To make it clearer, let's make an example here, assuming that a 3D scenario has been set up:

Dm = new ht. dataModel (); g3d = new ht. graph3d. graph3dView (dm );//....... build a scenario dm. serialize (); // you can enter the number parameter as the space indent value.

Since we have set up the environment and converted it into a json file, it is difficult to control the Code. In this case, we will deserialize the DataModel data model. The function is to convert the json format into an object, the deserialization object is passed into the DataModel data model. for details, see the HT for Web serialization manual:

 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);

Currently, we need to traverse the DataModel data model to obtain the "door" in the operation scenario and the path we are going to take:

For (var I = 0; I <dataModel. size (); I ++) {var data = dataModel. getDatas (). get (I); if (data. getName () = "Door") {// name window set in json. door = data;} if (data. getName () = "path") {path = data;} if (window. door & path) {// after obtaining the data of the door and path, the loop break exists ;}}

In this example, there are only four actions: "reset" back to origin, "Start action", "Move Forward", and "stop ". Click the start button. In the start action, we only perform one action and open the door. After the action is completed, the "forward" function is called to move forward:

Function startAnim () {if (window. isAnimationRunning) {return;} reset (); window. isAnimationRunning = true; // whether the animation is in ht state. default. startAnim ({frames: 30, // Number of animation frames, 'ht. default. animFrames '. Interval: 20, // specifies the animation frame interval. 'ht. Default. animInterval 'is used by Default '. FinishFunc: function () {// function called after the animation ends. Forward () ;}, action: function (t) {// The action function must be provided to implement attribute changes during the animation process. Door. setRotationY (-120 * Math. PI/180 * t );}});}

Here, the "reset" function is the "reset" back-to-origin function. We use this function to restore all changed items to the initial position, including the "Gate" position:

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

To "move", you must walk the path, that is, the "path" We just obtained, through the window. points = path. getPoints (). _ as; get all elements in "path" and initialize window. forwardIndex = 0; by controlling the first and second points in the path, we can set the Eye and Center in the 3D scenario to create an effect that we are the first person:

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; // the distance between two points is calculated using the triangle stock theorem to avoid wall hitting. Therefore,-200g3d is used. setEye ([point1.x, 1600, point1.y]); // eyes g3d. setCenter ([point2.x, 1600, point2.y]); // me

In HT, the 3D component has a walk (step, anim, firstPersonMode) method. This function changes the position of both the eye and the center, that is, the eye and center move the same offset at the same time in the vector direction established at two points. Step is the offset vector length value. If the firstPersonMode parameter is null, the current value of Graph3dView # isFirstPersonMode () is used by default. If the first-person mode is used to call the walk operation, this function considers the border restriction of 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]); // Changes the end point to the starting point 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]; // The Last vertex g3d of points in the path in json. setCenter ([lastPoint. x, 1400, lastPoint. y]); g3d. rotate (-Math. PI/2, 0, {frames: 30, interval: 30, finishFunc: function () {window. isAnimationRunning = false ;}});}}});

Regardless of the number of "path" points, this judgment statement can still operate. Only the last point is the function called after the finishFunc animation is finished, and the window. set isAnimationRunning to false to stop the startAnim function. If it is not the last vertex, after the user "rotates", the forward function is called back. At this point, all the code has been explained, and such a large project has been made for a short amount of code!

Summary

The above section describes the HTML5-based Web GL classic 3D virtual machine room roaming animation. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!