This article is from netease Cloud community

Author: Tang Zhao


Project background

That was in a without warning in the afternoon, I still immersed in the world of vue, suddenly editor ran N for the new website want to do something 3 d view, in fact my heart is rejected at the beginning, it is a little something done substantial WEBGL, just set mini project when looked at the basic content, moreover also is very busy at that time, Feel this thing sounds very complicated, with the end of the project development here to write this article, record their own problems encountered in the process of development and solutions for memory.


The preparatory work

Development and use: WS, THREejS-R82, 3DsMax;

Initial problems: WebGL is not necessary for 3D panorama, cSS3 can also do this, but considering the problem of adding model animation later, we have to use WebGL. So what exactly is WebGL? WebGL is a 3D drawing standard, which allows the combination of JavaScript and OpenGL ES 2.0. By adding a JavaScript binding of OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas. This allows Web developers to display 3D scenes and models more smoothly in the browser with the help of the system graphics card, and to create complex navigation and data visualizations. Webgl is based on the combination of OpenGL and JavaScript technology, and OpenGL competes with Microsoft DirectX, and Microsoft also develops Silverlight plug-in, which is actually similar to WebGL, so Microsoft does not support WebGL technology. But the latest Internet Explorer 11 and Edge browsers are OK. So the difficulty at the beginning was how to construct the 3D scene and internal model animation. (Note: This article does not cover the basics of Threejs, so some webGL basics are required, see the link below)

Threejs basic knowledge explanation

Amway has a first chrome threeJs chrome.google.com/webstore/de plugin… The thief to use!


Problems encountered during development

  • The whole scene is divided into three parts, the outermost layer of the sky, in the middle of the building, as well as internal various lanterns, butterfly, fish and so on model animation, so we need to distribution to consider how to build the scene, the first is the outermost layer of the sky and the buildings, because have a special scene editing tools, N project team can be very convenient fish eye chart of the output of the scene, Therefore, I plan to use this fisheye diagram to directly construct a sphere, that is, to construct two spheres, one inside and one outside, respectively for the sky and the building. Let the sphere of the sky do TWEEN animation around the Y-axis to form the effect of the sky rotating. Meanwhile, PNG map is used for the internal building. Add transparent: True to the material to make the sky visible. If you do not add transparency, the transparent part of the PNG map will turn white.

  • Two layer outside the spherical model is very good, the next question becomes, how to do model animation, because everyone have never done it before, so at first I was helpless, because this thing don’t know where to start, at the back need to understand the model animation by dedicated animators to modeling and texturing and animation, Exporting the corresponding files is put into the scene by the front end, so I happily asked the animation of the game to export DAE files to me. Why did I export DAE? Because I saw the model of DAE used in threejs example, I took it for granted that I could put dae files into threejs. I’m still too young too simple. Why, I look at the official sample in the afternoon again and again ask myself, why can’t the rest of my, don’t I export model is not, so I am a check information, at that moment, sogou baidu Google play, but is still struggling to fruit, going to study the official dae will work file, you can import Max found all messing up, can’t laid hands on him, Finally, when we were about to have dinner at noon the next day, we found a paragraph of words from a buddy in a Max forum, which made us suddenly understand. I can’t remember his exact words, but the central meaning is the same: Dae files used on the web should be set up again after the model has collapsed, and mirror bones can not be used. I must not understand the meaning of this, but it must mean that the DAE file directly exported is wrong, so I asked the animator of our group, she looked at it and said: “I see. I’ll try.” Then began our animators various attempts, gave me all kinds of files for import, the model can be imported the normal at the beginning, but animation is always wrong, or the skeleton information lost, or a variety of exotic jitter frequency, we are again being hit, later found that more than R7X animation calls while checking the documents and the R6X changed, I made some code changes, oh My God finally saw a live model in the scene, and we started working on texturing and self-illumination.

  • Generally above this part was the confidence and the most time consuming part of the, because eat crab is always not easy, but later found that there are many other problems such as himself, first the model with no lights, appear very dim, so need to add a light source, because the inside of the scene background is a picture, If a light source with a large irradiation range is added, it is bound to affect the image and change the exposure of the image, so I had to study the spontaneous light of the model. Later, I found that it was relatively simple. I needed the animator to give me an appropriate color value and set my own color and emissive.

  • The petals in the scene are random particles generated by particle emitters. Add the texture of petals, and the fall of petals is generated at an appropriate value by random number. But since the particle itself has no XYZ, it can’t rotate.

  • Maps in a scene cannot be used across domains due to WebGL’s same-origin policy.

  • Scenario font problem, is the default does not support Chinese fonts in threejs, can only use English, because, you know, there are too many Chinese characters, so if need to use Chinese in the scene in the project, you can refer to the article addresses, and if you don’t have to use it is better to use English, because the load is a flow.

  • Finally, there is the mouse event in the scene. If you haven’t done it before, you will be completely confused, because there is no click event in the scene. For example, a mouse moves over a clickable object and becomes a hand shape without knowing how to do it. Knowing that ThreeJS provides a RayCaster API that returns all 3d elements where the user’s cursor is located, it works by projecting a ray in the direction of a vector formed by a 2d coordinate point on the screen and the camera’s position and perspective, and returns a collection of all 3D objects intersecting the ray. The first object of the collection is the object closest to the camera, and the last object is the object farthest from the camera. When the picker is used to obtain the object clicked by the user, it is necessary to put all 3d objects that can participate in user interaction into a set beforehand. After the picker is created, the intersection of the two sets is obtained, that is, all objects that are set as selectable at the position clicked by the current user on the screen, and the first one can be regarded as the object clicked directly by the user. So all interaction within the scene can only be done by ray, and there are also some event libraries on Github that encapsulate the scene object click, which is also based on ray. However, due to the PNG mapping problem mentioned above, I asked the animator to make the interactive object into an animation model, and then I found out why there was no intersection between my ray emission in the past. At first, I thought there was something wrong with my mouse, but later I repeated it for several times and found that the animation model did not work, and the ordinary mesh was OK. Then the problem must be animation. I went to Github for a long time and saw someone with the same problem as me. The portal, the responder said that the skinnedMesh has been removed from the ray set, the old version had support, so I had to think of other methods, and finally added a normal mesh in front of the animation model to make it transparent, so that the ray intersection. You can click on objects perfectly.


The last word

At this point the scene inside the object interaction and animation functions are basically OK, but there are a lot of research before the content of the last not to the whole project, such as the movement of the camera rotation, scene more dense atmosphere rendering, it is restricted to a web browser, to tell the truth on the web to make 3 d was not too good, card consumption and large, It didn’t take long, it was only 26 days, and it took a lot of time to integrate the dual-end press release system, do other integration and so on, so I’ll take a look at threeJs in the future to enhance my tech stack and understand WebGL better.


Netease Cloud Free experience pavilion, 0 cost experience 20+ cloud products!

For more information about NETEASE’s r&d, product and operation experience, please visit netease Cloud Community


The working principle of Kubernetes is analyzed