lqq-code / Threejs-3d

Naked-eye 3D Effect with tracking.js + three.js

Creating Stereoscopic 3D Effect with tracking.js Gyroscope and three.js

Demo: https://threejs-3d.vercel.app/

GitHub Repository: https://github.com/lqq-code/threejs-3d

Introduction to three.js

• three.js is a webGL framework.

• It simplifies 3D graphics programming by providing an intuitive way to work with common 3D objects.

• It's a cross-browser scripting library or API that allows creating and showcasing animated 3D computer graphics within a web browser using JavaScript.

Please note that while I've provided a translation, the formatting options for rich text are limited in this context.

1. Creating the Scene

Three essential components: Scene + Camera + Renderer

Constructor Parameters

1. PerspectiveCamera(fov, aspect, near, far) - Perspective camera
2. Fov – The extent of the scene visible on the display, measured in degrees.
3. Aspect – The ratio of the object's width to its height, e.g., aspect ratio of a movie frame.
4. Near – Near clipping plane.
5. Far – Far clipping plane.

Types of cameras: OrthographicCamera and PerspectiveCamera Perspective camera mode is commonly used to simulate what the human eye sees and is the most common projection mode in 3D scene rendering.

2. Renderer

3. Adding a Cube

The reason we need to move the camera is that by default, both the camera and object (mesh) have the coordinates (0,0,0). This means that our camera is located inside the object. When the camera is inside an object, you might not see anything, as materials are set to render only one side by default. Moving the camera is done to bring it outside of the object.

4. Setting up Lights

5. Making the Cube Rotate

requestAnimationFrame is a built-in browser function and is not specific to three.js. It functions similarly to setTimeout, both being used to execute a callback function after a certain period of time. The difference is that setTimeout allows you to specify a custom interval, whereas requestAnimationFrame operates at approximately 1/60 second intervals. When the page is switched, requestAnimationFrame is paused to save on performance and battery consumption.

Achieving 3D Effects Using Gyroscope

The W3C standard API DeviceOrientation is used to detect the rotational orientation and acceleration of mobile devices. On iOS devices, this API requires users to grant explicit permission.

Tips:

1. The requestPermission must be initiated by the user and triggered within a user interaction event, such as a click or touchend.
2. The usage of this API is restricted to web pages accessed through the HTTPS protocol.

Implementing 3D Effects through Facial Recognition

tracking.js

• A standalone JavaScript library that primarily enables tracking and detection of colors and individuals (faces, facial features, etc.).
• It can trigger JavaScript events based on detecting specific colors or the presence and movement of a person (body/face), enabling the capture of facial data.

1. Trackers: Object Trackers

• face
• eye
• mouth

Introducing Classifier Training

<script src="tracking.js/build/data/face.js"></script>
<script src="tracking.js/build/data/eye.js"></script>
<script src="tracking.js/build/data/mouth.js"></script>

Deployment: Vercel

By authorizing Vercel with your GitHub account, you can achieve an incredibly elegant deployment experience. With just a gentle push of your code, your project will be automatically updated and deployed.