CSS 3D Panorama – Taobao Creation section technical analysis

preface

3D panoramis are nothing new, but the 3D panoramis we see on the Web used to be done in Flash. If we can properly use the relevant knowledge of CSS3 Transform, we can also achieve a similar effect. In other words, 3D panorama is actually one of the application scenes of CSS3 3D.

To prepare

Before implementing CSS3 3D panorama, we will first sort out some CSS3 Transform properties:

Here’s a closer look at some of the points above:

• forperspective, which specifies the “eye” and the element’sperspective-origin(The default is50% 50%) point distance. So here’s the question: “When we applypxAs a unit of measurement, how can we quantify its actual distance (i.e., how can we get a familiar distance that we can easily express)?”
  
  A: When our screen resolution is 1080P (1920*1080px) and the perspective value of the element or ancestor element is1920px, the stereoscopic effect of the element with the CSS3 3D Transform applied is equivalent to the actual effect of the element viewed in front of a screen width (1920px). However, I am not sure how exactly to set a suitable one for the elementperspectiveValue, can only guess a rough value, and then dynamically modify the value to achieve a satisfactory rendering effect.
  
  
  
  According to theSimilar triangleThe property calculates the actual size of the element that is moved forward to be displayed on the screen
  
  
  
  
  
  

  There is another important point about perspective. Because the default value of perspective-Origin is 50% 50%, which element to apply the Perspective attribute determines the location of the “eyes” (that is, the Angle at which our “eyes” view the object). In general, when we need to face an object, we will set this property on one of the ancestral elements that overlap with the element’s center.

  On the other hand, say: “How do I make an element invisible?” , you might say backface-visibility:hidden; . In fact, the browser will not render elements behind the “eye” (with the transform-Origin reference point) whose z-axis value is greater than the value of the perspective.

• For transform-style, this property specifies whether the child element is in a 3D or 2D scene. For a 2D scene, the elements are rendered in the same way they would normally be (that is, in the case of normal document flow, they are rendered in the order of the elements in the code, with subsequent elements obscuring the elements before them); For 3D scenes, elements are arranged in a real-world order (the closer you are to the “eye”, the more distant the elements are from the “eye”).

  In addition, since the transform-style property is non-inherited, it needs to be explicitly set for intermediate nodes.

• For the transform attribute, the following figure shows the direction of rotate3D and translate3D transformation: The order of transform attributes in transform is related. For example, translateX(10px) rotate(30deg) and rotate(30deg) translateX(10px) are different.

  Also, note that if you have a negative value in scale, that direction will flip 180 degrees;

  In addition, some transform effects cause elements (fonts) to be blurred, such as translate values with decimals, elements amplified by translateZ or scale, etc. Each browser behaves differently.

implementation

Here’s how to implement a CSS Transform 3D panorama:

Imagine standing in the middle of an intersection, holding your body still and rotating your head 360 degrees, creating a panorama centered around you. In fact, when the focal length is constant, we are standing at the center of a cylinder.

But the biggest difference between the virtual world and the real world is that nothing is continuous, that is, everything is discrete. For example, you can’t display a perfect circle on the screen. You can only represent a circle as a regular polygon: the more sides, the more “perfect” the circle is.

Similarly, in three dimensions, each 3D model is equivalent to a polyhedron (i.e., a 3D model can only be composed of uncurved planes). This is not surprising when we are talking about a model that is itself a polyhedron, such as a cube, but we need to keep this principle in mind when we want to show other models, such as spheres.

The taobao Creation Festival event page is a great CSS 3D panorama page, which divides the panorama into 20 equal sections with 18° (360-20) difference between adjacent elements. Note that we want to make sure that the face of each element points toward the center of the cylinder, so we need to calculate the rotation Angle of each equal portion. And then you move the element outward (in the z-direction) by R px. For a cube r is side length over 2, but for other more complicated regular polyhedra?

Example: For a regular nhedron, the width of each element is210pxAnd the corresponding Angle is40 °, namely, as shown below:

Images from:Desandro. Making. IO / 3 dtransform…



Top view of the regular nenhedron

function calTranslateZ(opts) { return Math.round(opts.width / (2 * Math.tan(Math.PI / opts.number))) } calTranlateZ({ width: 210, number: 9 }); / / 288Copy the code

#view(perspective:1000px) #stage(transform-style:preserve-3d) #cube(transform-style:preserve-3d). Div (width:600px; Height: 600 px) /* The elements that make up the cube */Copy the code

Panorama material production

Panorama making is divided into design and real scene:

Design class

To create a panoramic page similar to Taobao Maker Festival, the design draft needs to have the following requirements.

Note: The specific data mentioned below are based on the Creation Section, and can be adjusted according to their own requirements (if found lacking, welcome to supplement).

The overall background design is as follows (2580*1170px, divided into 20 equal parts) :

Basic requirements:

1. It needs to be end to end horizontally;
2. Because the effect drawing eventually needs to be cut into N equal parts, the width of the design drawing should be divisible by N as much as possible.
3. Image size takes into account not only the size of the front view, but also the fact that elements can still cover the field of view when rotated (optional).

Of course, the above picture is just the background picture, and you can also add some small object materials (parallax can be formed by the difference of motion speed to enhance the stereo effect), such as:





Small object elements (dotted lines are for reference, there are 21 small objects in the Festival)

As shown in the figure above, each picture is equally divided into M equal parts. Of course, M depends on where the object is in the background and how big it is. In addition, the width of M is the same as the width of N. Although some objects (M>1) have a smaller proportion of the pattern on both sides, it is recommended to keep the same width.

Note: if the small object has special deformation effect, the specific deformation parameters should be noted.

There are no special requirements for top and bottom images.

Live class

If you want to create a live panorama, take a look at Google Street View:

Google street viewRecommended devices are:

The last

As the software and hardware of terminal devices continue to improve and improve, the Web is not far behind in the FIELD of 3D, if you are tired of playing with 2D H5 or want to provide users with a more innovative and excellent experience, panorama may be a choice.

Finally, if there is anything unclear or unclear, please contact me and I will try my best to solve it. Thank you thank you ~

Last update: 2016-08-25 10:06:43