three.js
Bibliothèque JavaScript pour les formats de fichiers 3D
API JavaScript Open Source pour la lecture, l'écriture et le rendu WebGL, FBX, Collada ainsi que les formats de fichiers OBJ via la bibliothèque 3D gratuite.
three.js est une bibliothèque 3D JavaScript pure et open source facile à utiliser qui donne aux développeurs de logiciels la possibilité de rendre des fichiers WebGL. La bibliothèque three.js propose des chargeurs pour de nombreux formats de fichiers tels que FBX, Collada ainsi que OBJ, mais le format recommandé pour l'importation et l'exportation de données est glTF. L'avantage du format de fichier glTF est qu'il est très compact et peut être facilement transmis et se charge également très rapidement.
La bibliothèque prend en charge plusieurs fonctionnalités importantes liées aux modèles 3D telles que la création d'une scène, le chargement de modèles 3D, la création de texte, le dessin de lignes définissant une caméra, la création d'un cube géométrique, l'ajout d'un cube à la scène, le rendu de la scène, l'ajout d'une fenêtre à l'élément, et beaucoup plus. Il existe différentes caméras utilisées dans la bibliothèque three.js.
En bref
Présentation des fonctionnalités de three.js.
- Créer des scènes 3D
- Chargement des modèles 3D
- Tracer des lignes
- Lire/écrire FBX
- Lire/Écrire Collada
- Convertir des scènes 3D
- Exporter des données dans glTF
- manipulation des composants
- gérer les textures
three.js est compatible avec les formats de fichiers 3D courants répertoriés ci-dessous.
Indépendance de la plate-forme
three.js peut être exécuté sur n'importe quel bundle JavaScript moderne, le choix le plus populaire étant webpack.
- Javascript
Premiers pas avec three.js
Le moyen le plus simple d'installer three.js consiste à utiliser npm. Veuillez utiliser la commande suivante pour une installation fluide.
Installer three.js via NPM
npm install --save three Créer une scène à l'aide de JavaScript
La bibliothèque open source three.js a pris en charge la création d'une scène 3D pour faire tourner un cube dans sa propre application JavaScript. Pour afficher quoi que ce soit avec three.js, nous avons besoin d'une scène, d'une caméra et d'un moteur de rendu. Vous pouvez utiliser différentes caméras et leurs attributs pour compléter la scène. Ensuite, vous pouvez utiliser une instance de rendu et définir la taille à laquelle nous voulons qu'elle rende notre application. Vous pouvez conserver la résolution inférieure ou supérieure. Enfin, vous ajoutez l'élément renderer (<canvas>) à votre document HTML. Vous pouvez facilement créer un cube en utilisant BoxGeometry et en utilisant le matériau pour le colorer. Après cela, vous avez besoin d'un maillage qui peut être inséré dans la scène et déplacé selon vos besoins.
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 moteur de rendu. You can use different cameras and their attribute to complete the scene. Next, you can use a moteur de rendu 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 moteur de rendu 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 Engrener that can be inserted into the scene and moved according to your need.
Chargement de modèles 3D via JavaScript
La bibliothèque open source three.js permet aux programmeurs de logiciels de charger des modèles 3D dans leur propre application avec seulement quelques lignes de code JavaScript. Les modèles 3D sont disponibles dans des centaines de formats de fichiers. Chaque modèle a des objectifs différents, des fonctionnalités diverses et une complexité variable. Tout d'abord, vous devez avoir un chargeur et après cela, vous pourrez charger la scène.
Tracer des lignes dans un diagramme
La bibliothèque open source three.js a pris en charge le dessin de lignes ou de cercles dans sa propre application JavaScript. Pour commencer, nous devons configurer le moteur de rendu, la scène et la caméra. Après cela, vous devez définir le matériau et pouvez utiliser LineBasicMaterial ou LineDashedMaterial. Après le matériau, nous aurons besoin d'une géométrie avec quelques sommets. Des lignes sont tracées entre chaque paire consécutive de sommets.
