1. Forme de texte
En parlant de texte 3D, je me souviens de quelques mots artistiques dans mes premières années:
Ensuite, TextGeometry peut être utilisée pour créer des formes de texte tridimensionnelles.
L'utilisation de formes de texte nécessite le téléchargement et la citation de bibliothèques de polices supplémentaires. Ici, prenons la police helvetiker comme exemple.
Citation:
<script type = "text / javascript" src = "Votre chemin / helvetiker_regular.typeface.json"> </ script>
Le constructeur de TextGeométrie est:
Trois.TextGeométrie (texte, paramètres)
Le texte est une chaîne littérale;
Les paramètres sont des objets composés des paramètres suivants:
・ Taille: taille de police, généralement la hauteur des majuscules
・ Hauteur: l'épaisseur du texte
・ Curvesegments: Le nombre de segments d'arc rend la courbe du texte plus fluide
・ Police: police, par défaut est «Helvetiker», et le fichier de police qui doit être référencé
・ Poids: la valeur est «normale» ou «gras», indiquant si elle est plus épaisse
・ Style: la valeur est «normale» ou «italique», indiquant si l'italique est l'italique
・ Bivelabled: valeur booléenne, que ce soit pour utiliser le chanfrein, signifiant couper obliquement au bord
・ Biseauté: épaisseur de chanfrein
・ Biseauté: largeur de chanfrein
Créez un texte tridimensionnel: new THREE.TextGeometry('Hello', {size: 1, height: 1})， son effet est:
Les matériaux et l'éclairage peuvent être ajustés de manière appropriée pour atteindre l'effet souhaité:
// Metal Shining Object Var Material = new Three.MeshPhongMaterial ({Color: 0xFFFF00, Spectar: 0xFFFF00, // spécifiez la luminosité du matériau et la couleur de la partie clôturée. Si réglé sur la même couleur que la propriété de couleur, une autre sous-marine plastique). // Light Directionnel Var Light = new Three.DirectionAllight (0xffffff); Light.Position.Set (-5, 10, 5); Scene.Add (Light);Code source:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> 3.js test six </ title> </ head> <body onload = "init ()"> <canvas id = "MainCanvas"> </ Canvas> <! - Trouvez plus d'informations sur https://github.com/mrdoob/there.js/tree/master/examples/fonts -> <script type = "text / javascript"> function init () {var renderer = new Three.webglRenderère ({canvas: document.getElementyd ('MainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // caméra var caméra = new Three.othographicaMamera (-2,5, 2,5, 1,875, -1,875, 0,1, 100); caméra.position.set (5, 5, 20); caméra.lookat (new Three.vector3 (1, 0, 0)); scene.add (caméra); // var Material = new Three.MeshBasicMaterial ({// couleur: 0xffff00, // wireframe: true //}); // Metal Shining Object Var Material = new Three.MeshPhongMaterial ({Color: 0xFFFF00, Spectar: 0xFFFF00, // spécifiez la luminosité du matériau et la couleur de la partie clôturée. Si définie sur la même couleur que la propriété de couleur, un autre matériau de type métal sera obtenu. Si défini sur le gris gris, il ressemble à une sous-marine plastique: 0 // Spécifier la brillance de la question de la surface de surbrillance; // Direction Light Var Light = new Three.Directionallight (0xFFFFFF); light.position.set (-5, 10, 5); scene.add (lumière); // Charge Font var Loader = new Three.Fontloader (); Loder.Load ('./ Helvetiker_Regular.Typeface.json', fonction (Font) {var Mesh = new Three.Mesh (new Three.TextGeomeTetry ('Hello', {Font: Font, Size: 1, Height: 1}), Material); Scene.add (Mesh); // Render Render.render (Scène, Camerie);}); } </ script> </html>2. Formes personnalisées
Pour les formes non fournies par trois.js, des formes personnalisées peuvent être fournies pour créer.
Étant donné que les formes personnalisées nécessitent une spécification manuelle de chaque position de sommet et de la connexion du sommet, si la forme est très complexe, les calculs du programmeur seront relativement grands. Dans ce cas, il est recommandé de créer un modèle dans un logiciel de modélisation tel que 3DS MAX, puis de l'importer dans la scène à l'aide de trois.js, ce qui sera plus efficace et plus pratique.
Les formes personnalisées utilisent la classe Geometry , qui est la classe parentale d'autres formes géométriques telles que CubeGeometry , SphereGeometry , etc., et son constructeur est:
THREE.Geometry()
Initialiser une géométrie, puis définir la position du sommet et l'état de connexion du sommet:
Code source:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <itle> 3.js test six-two </ title> </ head> <body onload = "init ()"> <canvas id = "MainCanvas"> </ canvas> </pory> <script type = "text> javascrip <script type = "text / javascript"> function init () {var renderer = new Three.WebglRenderer ({canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // caméra var caméra = new Three.othographicaMamera (-5, 5, 3,75, -3,75, 0,1, 100); caméra.position.set (25, 25, 25); caméra.lookat (new Three.Vector3 (0, 0, 0)); scene.add (caméra); var Material = new Three.MeshBasicMaterial ({couleur: 0xffff00, wireframe: true}); // Initialiser la géométrie var géométrie = new Three.Geometry (); // Définir la position du sommet // 4 sommets supérieurs Geometry.vertices.push (new Three.Vector3 (-1, 2, -1)); geometry.vertices.push (new Three.Vector3 (1, 2, -1)); géométrie.vertices.push (new Three.Vector3 (1, 2, 1)); geometry.vertices.push (new Three.Vector3 (-1, 2, 1)); geometry.vertices.push (new Three.Vector3 (-1, 2, 1)); geometry.vertices.push (new Three.Vector3 (-1, 2, 1)); geometry.vertices.push (new Three.Vector3 (-1, 2, 1)); geometry.vertices.push (new Three.Vector3 (-1, 2, 1)); // les 4 sommets inférieurs Geometry.vertices.push (new Three.Vector3 (-2, 0, -2)); Geometry.vertices.push (new Three.Vector3 (2, 0, -2)); Geometry.vertices.push (new Three.Vector3 (2, 0, 2)); Geometry.vertices.push (new Three.Vector3 (2, 0, 2)); Geometry.vertices.push (new Three.Vector3 (-2, 0, 2)); // Définir l'état de connexion du sommet // Top Geometry.faces.push (new Three.Face3 (0, 1, 3)); geometry.faces.push (new Three.face3 (1, 2, 3)); // geometry.faces.push (new Three.face4 (0, 1, 2, 3)); // Bottom Geometry.faces.push (new Three.face3 (4, 5, 6)); Geometry.faces.push (new Three.face3 (5, 6, 7)); // geometry.faces.push (new Three.face4 (4, 5, 6, 7)); // latéral géométrie.faces.push (new Three.face3 (1, 5, 6)); Geometry.faces.push (new Three.face3 (6, 2, 1)); Geometry.faces.push (new Three.face3 (2, 6, 7)); Geometry.faces.push (new Three.face3 (7, 3, 2)); Geometry.faces.push (new Three.face3 (3, 7, 0)); Geometry.faces.push (new Three.face3 (7, 4, 0)); Geometry.faces.push (new Three.face3 (0, 4, 5)); Geometry.faces.push (new Three.face3 (0, 4, 5)); Geometry.faces.push (new Three.face3 (0, 4, 5)); géométrie.faces.push (new Three.face3 (0, 5, 1)); // // face composée de quatre sommets // geometry.faces.push (new Three.face4 (0, 1, 5, 4)); // geometry.faces.push (new Three.face4 (1, 2, 6, 5)); // geometry.faces.push (new Three.face4 (2, 3, 7, 6)); // geometry.faces.push (new Three.face4 (3, 0, 4, 7)); var mesh = new Three.Mesh (géométrie, matériel); Scene.Add (Mesh); // Render renderer.render (scène, appareil photo); } </ script> </html> Il convient de noter que new THREE.Vector3(-1, 2, -1) crée un vecteur qui est annexé au tableau geometry.vertices en tant que positions de sommet.
Et un visage composé de trois sommets est créé par new THREE.Face3(0, 1, 2) et l'ajoutant au tableau geometry.faces . Les trois paramètres sont les numéros de séquence des trois sommets dans geometry.vertices . Si vous devez définir un correctif composé de quatre sommets, vous pouvez également utiliser THREE.Face4 .
// Top Geometry.faces.push (new Three.Face4 (0, 1, 2, 3)); // Bottom Geometry.faces.push (new Three.Face4 (4, 5, 6, 7)); // quatre côtés Geometry.faces.push (New Three.Face4 (0, 1, 5, 4)); Geometry.faces.push (New Three.Face4 (1, 2, 6, 6, 5)); géométrie.faces.push (new Three.Face4 (2, 3, 7, 6)); Geometry.faces.push (new Three.Face4 (2, 3, 7, 6)); Geometry.faces.push (new Three.Face4 (3, 0, 4, 7));
Ce qui précède est l'intégralité du contenu des trois.js d'apprentissage des formes de texte et des formes personnalisées compilées par l'éditeur. L'éditeur a également compilé plusieurs articles connexes sur trois.js. Si vous en avez besoin, vous pouvez le visualiser via les liens des articles pertinents ci-dessous. J'espère que cela peut aider tous ceux qui apprennent trois.js.