WebGL classic 3D virtual computer room roaming animation based on HTML5

The use of first-person in 3D refers to the use of first-person in shooting games. First-person shooters (FPS) are a type of video game based on a first-person perspective centered around guns and other weapons; that is, the player passes through Experience the action through the protagonist's eyes. Since the genre's inception, advanced 3D and pseudo-3D graphics have challenged hardware development, and multiplayer gaming has become indispensable.

A screenshot from Doom, one of the genre's breakout games, showing off the typical perspective of a first-person shooter

Nowadays, museums or companies often use 3D animation to make promotional videos, etc. The biggest advantage of 3D animation interpretation is that it gives people a real feeling in terms of content and form. It is more intuitive than graphic works and more realistic than 2D animation, so it can give viewers the feeling of being in the advertising environment, greatly enhancing the persuasiveness of advertising. The development of 3D technology even challenges the audience's ability to distinguish, causing the audience's judgment to drift between virtual and reality.

Moreover, the application of 3D special effects provides a broader thinking space for creativity, becomes a reliable guarantee for creative execution, and enriches the form and style of creativity. According to the performance appeal of the advertising theme, a dreamlike and magical atmosphere can be created to stimulate and impress the audience, thereby achieving the purpose of communicating with the audience.

The 3D animated promotional video combines 3D animation, special effects shots, corporate videos, photos, future prospects and other content through post-production synthesis, dubbing and narration to form an intuitive, vivid and popular high-grade corporate advertising video, allowing people from different levels of society to Create a positive, positive, and good impression on the company, thereby establishing goodwill and trust in the company, and trusting the company's products or services.

The rapid development of 3D now is thanks to mankind's pursuit of reality, so learning to use 3D well is an indispensable part of future success.

The idea of ​​the example in this article is to visit a computer room. The action of opening the door cannot be more dynamic. Coupled with appropriate turns, it basically completely simulates the effect of people visiting the computer room. Another advantage is that if you want to demonstrate it to your boss without having to operate it, your boss will be very satisfied with this cool effect!

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

The reset and start buttons on the interface are buttons added directly to the body, and click events are added to these two buttons:

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

The entire scene is built from HT-encapsulated 3D components. Constructing such a large scene requires a certain amount of code. To simplify, I took out the scene separately and used the HT-encapsulated ht.JSONSerializer class to serialize the scene into json. Only the generated json file is introduced in the code. To make it clearer, I will give an example here, assuming that the 3D scene has been built:

 dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//....Construct the scene dm.serialize();//You can fill in the number parameter as a space abbreviation Value added

Now that 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 of this function is to convert the json format into an object and deserialize it. The object is passed into the DataModel data model. For details, please refer to 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);

We currently need to operate the door in the scene and the route we are going to take, traverse the DataModel data model, and obtain these two data:

 for (var i = 0; i < dataModel.size(); i++) { var data = dataModel.getDatas().get(i); if (data.getName() === gate) {//Set in json The name of window.door = data; } if (data.getName() === path) { path = data; } if (window.door && path) {//Get door and path After the data, break out of the loop; }}

Simply speaking, there are only four actions in this example, reset to the original point, start action, move forward, and stop. Click the start button. In the start action, we only performed one action, the door opening action. After the action is completed, we call the forward function to move forward:

 function startAnim() { if (window.isAnimationRunning) { return; } reset(); window.isAnimationRunning = true;//Whether the animation is in progress ht.Default.startAnim({ frames: 30, //The number of animation frames, used by default `ht.Default.animFrames`．interval: 20, //The animation frame interval uses `ht.Default.animInterval` by default. function() {// The function called after the animation ends. forward(); }, action: function(t){ // The action function must be provided to implement the attribute changes during the animation. door.setRotationY(-120 * Math. PI / 180 * t); } });}

The reset function here is the function of resetting back to the original point. We use this function to restore all changes to the initial position, including the position of the door:

 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 definitely need a walking path, which is the path we just obtained. Get all elements in the path through window.points = path.getPoints()._as; and initialize window.forwardIndex = 0; by controlling the front and back of the path. Set the Eye and Center in the 3D scene at two points, so as 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 through the triangle Pythagorean theorem. I am afraid of hitting the wall, so -200g3d.setEye([point1.x, 1600, point1.y]);//Eye g3d.setCenter([point2 .x, 1600, point2.y]);//I

The 3D component in HT has a walk(step, anim, firstPersonMode) method. This function changes the positions of the eye and center at the same time. That is, the eye and center move the same offset in the vector direction established by the two points at the same time. step is the offset vector length value. When the firstPersonMode parameter is empty, the current value of Graph3dView#isFirstPersonMode() is used by default. If the walk operation is called for the first-person mode, this function will consider the boundary restrictions 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]);//Change 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];//points of path in json The last point g3d.setCenter([lastPoint.x, 1400, lastPoint.y]); g3d.rotate(-Math.PI / 2, 0, { frames: 30, interval: 30, finishFunc: function() { window .isAnimationRunning = false; } }); } }});

No matter how many points there are in the path, this judgment statement can still work. Only the last point is to jump out of the function called after the finishFunc animation ends, and set the window.isAnimationRunning value to false to stop the startAnim function. If it is not the last point, after the user rotates, the forward function is called back. At this point, all the codes have been explained. Such a large project has been accomplished in a very short amount of code!

The above is the WebGL classic 3D virtual computer room roaming animation based on HTML5 introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!