This is the fifth day of my participation in the August Wen Challenge.More challenges in August

preface

I saw the implementation of naked eye 3D recommended on the home page and found it very cool. A closer look is the Android end to achieve, I see this common front-end is not very understand, but at least the idea and general methodology. Just two days ago when I was studying web browser events, I saw web gyroscope events, which happened to be consistent with the gyroscope mentioned in the article. Is it possible to achieve glasses-free 3D on the Web side?

After reviewing MDN and knowing that mobile browsers generally support DeviceOrientation — Gyroscopic events, let’s get started.

deviceorientation

Deviceorientation is an event defined by the DeviceOrientationEvent specification that will fire on the window. When Deviceorientation is triggered, the Event object will contain the coordinate value changes of each axis relative to the device when it is stationary, mainly including the following five attributes.

  • Alpha:0 ~ 360Floating point values in the range, representing aroundzShaft rotatesyDegree of axis (left and right rotation).
  • Beta:- 180 ~ 180Floating point values in the range, representing aroundxShaft rotateszDegree of axis (forward and backward).
  • Gamma:- 90 ~ 90Floating point values in the range, representing aroundyShaft rotateszDegree of axis (torsion).
  • Absolute: A Boolean value indicating whether the device returns an absolute value.
  • CompassCalibrated: Boolean value indicating whether the compass of the device is correctly calibrated.

I’m only using beta and gamma here, not the horizontal rotation alpha.

Listening to the

Because MDN notes that Chrome supports DeviceOrientation events. So write a listener event as follows:

window.addEventListener("deviceorientation".function(event) {
    console.log(event.beta, event.gamma);
});
Copy the code

Naively thought that the value of the event could be obtained, but the debugging did not get it for a long time. After querying ios to obtain DeviceOrientationEvent, two conditions are required:

  • User manual clickbuttonButton forrequestPermissionpermissions
  • Must behttpsagreement

The button permission problem can be solved by adding the following code:

$('.btn').on('click'.function() {
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        DeviceOrientationEvent.requestPermission()
            .then(permissionState= > {
                if (permissionState === 'granted') {
                // handle data
                window.addEventListener("deviceorientation".function(event) {
                    console.log(event.beta, event.gamma);
                });
                } else {
                // handle denied
                }
            })
            .catch((err) = > {
                console.log(err) }); }});Copy the code

Since I’m using VScode Live Sever to start the native HTML, I need to configure HTTPS information in the Live Sever extension. First, generate the relevant files required for HTTPS, and then configure them.

"liveServer.settings.https": {
    "enable": true.//set it true to enable the feature.
    "cert": "D:\\https\\example.com+5.pem".//full path
    "key": "D:\\https\\example.com+5-key.pem".//full path
    "passphrase": ""
}
Copy the code

With both of these things in place, the gyroscope listening event also runs as scheduled.

The layer

Follow the reference for both articles with 3 layers:

  • The upper echelon tracks the phone’s offset
  • Middle motionless
  • The lower layer moves in the opposite direction to the offset of the phone

To implement the layer, use z-Index. The rest is simply to set the background image. The code is as follows:

.container {
    position: relative;
    width: 100%;
    height: 100%;
}
.top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(./img/top.png);
    background-size: cover;
    z-index: 300;
}
.middle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(./img/middle.png);
    background-size: cover;
    z-index: 200;
}
.bottom {
    position: absolute;
    top: -30;
    left: -30;
    right: -30;
    bottom: -30;
    background: url(./img/bottom.png);
    background-size: cover;
    z-index: 100;
}
Copy the code

The easiest way to do this is to change the top and left attributes:

window.addEventListener("deviceorientation".function(event) {
    document.querySelector('.top').style.top = 0 + event.beta + 'px';
    document.querySelector('.top').style.left = 0 + event.gamma + 'px';
    document.querySelector('.bottom').style.top = -30 - event.beta + 'px';
    document.querySelector('.bottom').style.left = -30 - event.gamma + 'px';
});
Copy the code

The effect

The final effect is as follows:

Generally speaking, the API used is not the same as Android, and the ideas and methods are roughly the same. I did not take into account the problem of layer boundary and the large numerical change of the gyroscope after a certain Angle of deflection. As the naked eye 3D implementation is only a simple version.

reference

  • The realization of the naked eye 3D effect of The Free Guest APP

  • Here you go! Free eye 3D effect of Flutter | More challenges in August