GitHub Repository: https://github.com/lqq-code/threejs-3d
-
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.
Three essential components: Scene + Camera + Renderer
Constructor Parameters
- PerspectiveCamera(fov, aspect, near, far) - Perspective camera
- Fov – The extent of the scene visible on the display, measured in degrees.
- Aspect – The ratio of the object's width to its height, e.g., aspect ratio of a movie frame.
- Near – Near clipping plane.
- 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.
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.
requestAnimationFrame
is a built-in browser function and is not specific to three.js. It functions similarly tosetTimeout
, both being used to execute a callback function after a certain period of time. The difference is thatsetTimeout
allows you to specify a custom interval, whereasrequestAnimationFrame
operates at approximately 1/60 second intervals. When the page is switched,requestAnimationFrame
is paused to save on performance and battery consumption.
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:
- The
requestPermission
must be initiated by the user and triggered within a user interaction event, such as a click or touchend. - The usage of this API is restricted to web pages accessed through the HTTPS protocol.
- 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.
- 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>
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.