Interpretación del código fuente de Three.js I: Object3D

A muchos estudiantes les puede resultar fácil aprender la API Three.js, pero les resultará muy difícil comprender realmente lo que hace la API. De hecho, lo que dificulta a las personas no es Three.js en sí, sino el conocimiento de gráficos 3D oculto detrás de Three.js. Esta serie de artículos de interpretación del código fuente de Three.js lo ayudará a recuperar el conocimiento básico de los gráficos 3D y, al mismo tiempo, comprenderá verdaderamente los principios de implementación de Three.js, sabiendo qué es y por qué.

Object3D es la clase base para la mayoría de los objetos en ThreeJS. Contiene implementaciones js de desplazamiento, rotación, escalado de objetos y la relación padre-hijo de cada objeto. A continuación se explican varias propiedades importantes de Object3D:

Un objeto 3D generalmente se compone de múltiples objetos primarios y secundarios. El desplazamiento, la rotación y la escala del objeto primario se pasarán a todos los objetos secundarios.

this.parent apunta al objeto principal y this.children contiene todos los objetos secundarios.

Utilice agregar para agregar objetos secundarios a un objeto. Tenga en cuenta que si el objeto hijo tiene otro padre, primero eliminará el parentesco del objeto hijo del objeto padre antiguo y luego agregará el objeto hijo al nuevo objeto padre.

This.matrix representa la deformación local del objeto en sí, mientras que this.matrixWorld representa la deformación global del objeto. Cuando un objeto no tiene padre, la deformación global es una deformación local.

¿Por qué es tan importante la composición de los objetos? Considere el siguiente ejemplo:

Estos dos cubos juntos forman un objeto 3D, siendo el cubo inferior la base y el cubo superior los brazos. Cuando la base gira, el brazo gira con ella, por lo que la deformación del brazo se transfiere a la base. La base no se ve afectada cuando el brazo gira.

Aquí, la base es el objeto padre del brazo. Simplemente multiplique la deformación global de la base (this.parent.matrixWorld) con la deformación local del brazo (this.matrix) para obtener la deformación final del brazo. ¿No es muy conveniente?

El desplazamiento, rotación y escalado de objetos tridimensionales se pueden representar mediante matrices. Entre ellos, además de representarse mediante matrices, la rotación también se puede representar mediante ángulos de Euler y cuaterniones.

La rotación de Object3D representa la representación del ángulo de Euler de la rotación del objeto, y el cuaternión representa la representación del cuaternión. Son diferentes representaciones matemáticas de la rotación uniforme de un objeto tridimensional. (La matriz, los ángulos de Euler y los cuaterniones representan rotaciones)

Las devoluciones de llamada onRotationChange y onQuaternionChange se utilizan para sincronizar los ángulos de Euler y los cuaterniones para garantizar que representen el mismo ángulo de rotación.

Gran parte del trabajo que implica la interacción 3D es la necesidad de transformar las coordenadas en el espacio local del objeto (this.matrix) y el espacio mundial (this.matrixWorld).