three.js
Biblioteca de JavaScript para formatos de archivo 3D
API JavaScript de código abierto para leer, escribir y renderizar WebGL, FBX, Collada y formatos de archivo OBJ a través de la biblioteca 3D gratuita.
three.js es una biblioteca 3D de JavaScript puro, fácil de usar y de código abierto que ofrece a los desarrolladores de software la capacidad de renderizar archivos WebGL. La biblioteca three.js ofrece cargadores para numerosos formatos de archivo como FBX, Collada y OBJ, pero el formato recomendado para importar y exportar datos es glTF. Lo mejor del formato de archivo glTF es que es muy compacto y se puede transmitir fácilmente y también se carga muy rápido.
La biblioteca admite varias funciones importantes relacionadas con los modelos 3D, como crear una escena, cargar modelos 3D, crear texto, dibujar líneas, configurar una cámara, crear un cubo geométrico, agregar un cubo a la escena, renderizar la escena, agregar una ventana gráfica al elemento, y muchos más. Hay diferentes cámaras utilizadas en la biblioteca three.js.
de un vistazo
Una descripción general de las funciones de three.js.
- Crear escenas 3D
- Cargando modelos 3D
- Dibujar líneas
- Leer/Escribir FBX
- Leer/Escribir Collada
- Convertir escenas 3D
- Exportar datos en glTF
- manejo de componentes
- manejar texturas
three.js es compatible con los formatos de archivo 3D populares que se enumeran a continuación.
Independencia de la plataforma
three.js se puede ejecutar en cualquier paquete de JavaScript moderno, la opción más popular es webpack.
- JavaScript
Primeros pasos con tres.js
La forma más fácil de instalar three.js es usando npm. Utilice el siguiente comando para una instalación sin problemas.
Instalar three.js a través de NPM
npm install --save three Crear escena usando JavaScript
La biblioteca de código abierto three.js ha brindado soporte para crear una escena 3D para hacer girar un cubo dentro de su propia aplicación de JavaScript. Para mostrar cualquier cosa con three.js, necesitamos una escena, una cámara y un renderizador. Puedes usar diferentes cámaras y su atributo para completar la escena. A continuación, puede usar una instancia de renderizador y establecer el tamaño al que queremos que represente nuestra aplicación. Puede mantener la resolución más baja o más alta. Por último, agrega el elemento renderer (<canvas>) a su documento HTML. Puede crear fácilmente un cubo usando BoxGeometry y usando el material para colorearlo. Después de eso, necesita una malla que pueda insertarse en la escena y moverse según sus necesidades.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderizador. You can use different cameras and their attribute to complete the scene. Next, you can use a renderizador instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderizador element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Malla that can be inserted into the scene and moved according to your need.
Cargar modelos 3D a través de JavaScript
La biblioteca de código abierto three.js permite a los programadores de software cargar modelos 3D dentro de su propia aplicación con solo un par de líneas de código JavaScript. Los modelos 3D están disponibles en cientos de formatos de archivo. Cada modelo viene con diferentes propósitos, características misceláneas y complejidad variable. Primero, debe tener un cargador y luego podrá cargar la escena.
Dibujar líneas en un diagrama
La biblioteca de código abierto three.js ha proporcionado soporte para dibujar líneas o círculos dentro de su propia aplicación de JavaScript. Para empezar, necesitamos configurar el renderizador, la escena y la cámara. Después de eso, debe definir el material y puede usar LineBasicMaterial o LineDashedMaterial. Después del material, necesitaremos geometría con algunos vértices. Se dibujan líneas entre cada par de vértices consecutivos.
