This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

Hello everyone, I am big handsome old ape, do not know what kind of ape I am, but can I join the Rockets? If you like my article, you can follow ➕ to like, and practice with me ~

---

preface

Product managers have been making a lot of appearances in the Nuggets community lately, and it seems like everyone loves the idea of an engineer and a product manager falling in love.

This time he asked me to investigate how to implement glasses-free 3D in web pages

Are you trying to embarrass me?

What kind of research is affecting my touch

Now I want to shoot him

Shoot him with a bow and arrow

Burning his

Hey, if I put some boxes in a 3D scene, will it look more solid?

Plan 1: Create a box and break it

Now let’s try this with a very simple cube

It’s a little bit more three-dimensional, but that’s it? I’m afraid I can’t make a bad one…

However, with the help of your imagination, the frame may not be completely straight, but does this b-block block also give you some glasses-free 3D effects?

Solution two: face recognition

No, no, no, no, no, no, no, no.

At this time, I thought of another scheme, whether the camera can detect the position of the face in the camera picture in real time to simulate the naked eye 3D. I found tracking.js, a library for real-time face detection in the browser.

Github.com/eduardolund…

var tracker = new tracking.ObjectTracker('face');
  tracker.setInitialScale(4);
  tracker.setStepSize(2);
  tracker.setEdgesDensity(0.1);

  tracking.track('#video', tracker, { camera: true });

  tracker.on('track'.function(event) {
    context.clearRect(0.0, canvas.width, canvas.height);

    event.data.forEach(function(rect) {
      context.strokeStyle = '#a64ceb';
      context.strokeRect(rect.x, rect.y, rect.width, rect.height);
      context.font = '11px Helvetica';
      context.fillStyle = "#fff";
      context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
      context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
    });
  });
Copy the code

As you can see, the image shows the coordinates of the face in the camera view canvas, and with that coordinate data, we can do a lot of things.

And then we plug it into Threejs, and let’s try this cube again

The actual experience is still a bit interesting, but the feeling of recording the screen is not obvious, please download the demo source code to try it

Solution 3: gyroscope

W3C standard APIDeviceOrientation for measuring the rotation direction and acceleration of mobile devices. Using this API, we can obtain three basic properties:

• alpha(The Angle of horizontal rotation when the equipment is flat)

• beta(The Angle of rotation around the transverse X-axis when the device is flat)

• gamma(The Angle of rotation about the longitudinal Y-axis when the device is flat)

The API is very simple to use by adding a listener to the window

function capture_orientation (event) { 
    var alpha = event.alpha; 
    var beta = event.beta; 
    var gamma = event.gamma; 
    console.log('Orientation - Alpha: '+alpha+', Beta: '+beta+', Gamma: '+gamma); 
}

window.addEventListener('deviceorientation', capture_orientation, false);
Copy the code

Now we’re going to add this to our cube demo, and as we do that, it’s important to note here that on IOS devices, this API requires active user permission.

window.DeviceOrientationEvent.requestPermission()
    .then(state= > {
        switch (state) {
            case "granted":
                // Create a listener here
                window.addEventListener('deviceorientation', capture_orientation, false);
                break;
            case "denied":
                alert("You refused to use the gyroscope.");
                break;
            case "prompt":
                alert("Other actions");
                break; }});Copy the code

It returns a promise, so you can do the same

var permissionState = await window.DeviceOrientationEvent.requestPermission();
if(permissionState=="granted")window.addEventListener('deviceorientation', capture_orientation, false);
Copy the code

RequestPermission must be initiated by the user, that is, it must be triggered by a user action event such as “click”, and the call to the API must be used in a web page accessed through HTTPS.

conclusion

So far, I can think of several ways to achieve glasses-free 3D in web pages. What else can you think of? Please join us in the comments section.

This article is accompanied by a video tutorial

The Demo source code

Wechat search and follow “Handsome old ape”, reply “Eye3D” to get the sample code in this article