Threejs——Ayudante
introducción
En el proceso de usar threejs, descubrí que threejs tiene muchas clases auxiliares integradas, por lo que podemos implementar algunas funciones muy comunes con unas pocas líneas de código, que es simple y conveniente de usar.
La siguiente es una breve introducción a las clases auxiliares integradas en threejs.
Flecha (Ayuda de flecha)
Introducción
Arrow Helper, un objeto de flecha 3D utilizado para simular direcciones.
Documentación oficial: ArrowHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| directorio | La dirección basada en el origen de la flecha. Debe ser un vector unitario. |
| origen | origen de la flecha |
| longitud | La longitud de la flecha. El valor predeterminado es 1 . |
| maleficio | Valor de color hexadecimal definido. El valor predeterminado es 0xffff00. |
| longitud de la cabeza | La longitud de la punta de la flecha (cono). El valor predeterminado es 0,2 veces la longitud de la flecha (0,2 * longitud). |
| ancho de la cabeza | El ancho de la punta de la flecha (cono). El valor predeterminado es 0,2 veces la longitud de la punta de la flecha (0,2 * headLength). |
representaciones
Hachas (AxesHelper)
Introducción
Un objeto para la simulación simple de los ejes de coordenadas 3.
El rojo representa el eje X. El verde representa el eje Y. El azul representa el eje Z.
Documentación oficial: AxesHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| tamaño | (Opcional) Indica la longitud del segmento que representa el eje. El valor predeterminado es 1 . |
representaciones
Cuadro delimitador (BoxHelper)
Introducción
Objeto auxiliar utilizado para representar gráficamente el cuadro delimitador alineado con el eje universal de un objeto. Aviso:
- Para funcionar correctamente, el objeto de destino debe contener un BufferGeometry, por lo que no funcionará correctamente cuando el objeto de destino sea un sprite.
- Este cuadro delimitador contiene todos los objetos secundarios del objeto.
Documentación oficial: BoxHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| objeto | (Opcional) El objeto para mostrar el cuadro delimitador alineado con el eje universal. |
| color | (Opcional) El valor de color hexadecimal del cuadro de estructura alámbrica. El valor predeterminado es 0xffff00. |
representaciones
Cuadro delimitador 3 (Box3Helper)
Introducción
Un objeto auxiliar que simula un cuadro delimitador 3D Box3.
Documentación oficial: Box3Helper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| caja | El cuadro delimitador 3D simulado. |
| color | (Opcional) El color del cuadro de estructura alámbrica. El valor predeterminado es 0xffff00. |
representaciones
Mismo efecto que BoxHelper
Cámara (Ayudante de cámara)
Introducción
Objeto auxiliar para simular el frustum de la cámara.
Utiliza LineSegments para simular el frustum de la cámara.
Documentación oficial: CameraHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| cámara | La cámara simulada. |
representaciones
Luz paralela (DirectionalLightHelper)
Introducción
Objeto auxiliar que se usa para simular una luz direccional en la escena. Contiene un plano que representa la posición de la luz y un segmento de línea que representa la dirección de la luz.
Documentación oficial: DirectionalLightHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| luz | La fuente de luz que se está simulando. |
| tamaño | (Opcional) El tamaño del avión. El valor predeterminado es 1 . |
| color | (Opcional) Si no se establece ningún color, se utilizará el color de la fuente de luz. |
representaciones
Cuadrícula (GridHelper)
Introducción
Objeto auxiliar de cuadrícula Una cuadrícula es en realidad una matriz 2D de líneas.
Documentación oficial: GridHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| tamaño | Tamaño de cuadrícula. El valor predeterminado es 10. |
| divisiones | Tiempos de subdivisión de cuadrícula. El valor predeterminado es 10. |
| colorCenterLine | Color de línea media. El valor puede ser Tipo de color, hexadecimal y nombre de color CSS. El valor predeterminado es 0x444444. |
| cuadrícula de colores | Color de línea media. El valor puede ser Tipo de color, hexadecimal y nombre de color CSS. El valor predeterminado es 0x444444. |
representaciones
Cuadrícula polar (PolarGridHelper)
Introducción
Objeto auxiliar de cuadrícula polar La cuadrícula es en realidad una matriz 2D de líneas.
Documentación oficial: PolarGridHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| radio | Radio de cuadrícula polar. Puede ser cualquier número positivo. El valor predeterminado es 10. |
| sectores | El número de sectores en los que se dividirá la cuadrícula. Puede ser cualquier número entero positivo. El valor predeterminado es 16. |
| anillos | número de anillos. Puede ser cualquier número entero positivo. El valor predeterminado es 8. |
| divisiones | El número de subdivisiones del círculo. Puede ser cualquier número entero positivo mayor o igual a 3. El valor predeterminado es 64. |
| color1 | El primer color utilizado por la cuadrícula polar. El valor puede ser Tipo de color, hexadecimal y nombre de color CSS. El valor predeterminado es 0x444444. |
| color2 | El segundo color utilizado por la cuadrícula polar. El valor puede ser Tipo de color, hexadecimal y nombre de color CSS. El valor predeterminado es 0x888888. |
representaciones
HemisferioLightHelper
Introducción
Crea un objeto auxiliar de malla esférica virtual para simular una fuente de luz hemisférica HemisphereLight.
Documentación oficial: HemisphereLightHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| luz | La fuente de luz que se está simulando. |
| tamaño de la esfera | Tamaño de malla utilizado para simular fuentes de luz. |
| color | (Opcional) Si no se le asigna un ayudante, usará el color de la luz. |
representaciones
Avión (Ayudante de avión)
Introducción
Un objeto auxiliar para simular un avión.
Documentación oficial: PlaneHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| avión | El avión siendo simulado. |
| tamaño | (Opcional) La longitud del lado del objeto auxiliar. El valor predeterminado es 1. |
| maleficio | (Opcional) El color del objeto auxiliar. El valor predeterminado es 0xffff00. |
representaciones
Punto de luz (PointLightHelper)
Introducción
Crea un objeto auxiliar de malla esférica virtual para simular una fuente de luz puntual PointLight.
Documentación oficial: PointLightHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| luz | La fuente de luz a simular. |
| tamaño de la esfera | (Opcional) El tamaño del ayudante esférico. El valor predeterminado es 1 . |
| color | (Opcional) Si no se le asigna un ayudante, usará el color de la luz. |
representaciones
Esqueleto (Ayudante de esqueletos)
Introducción
El objeto auxiliar utilizado para simular el esqueleto Esqueleto El objeto auxiliar utiliza el material LineBasicMaterial.
Documentación oficial: SkeletonHelper – documentos de three.js (threejs.org)
parámetro
| parámetro | introducir |
|---|---|
| objeto | Por lo general, una instancia de SkinnedMesh. Sin embargo, se puede usar cualquier instancia de Object3D si representa una jerarquía de huesos (a través de Object3D.childs). |
representaciones
Foco (SpotLightHelper)
Introducción
Un objeto auxiliar de cono para simular un SpotLight.
Documentación oficial: https://threejs.org/docs/api/zh/helpers/SpotLightHelper.html
parámetro
| parámetro | introducir |
|---|---|
| luz | El foco SpotLight simulado. |
| color | (Opcional) Si no se le asigna un ayudante, usará el color de la luz. |
representaciones
Epílogo:
Soy un principiante en threejs, y acepto críticas y correcciones si escribo algo mal.