1. Forma de texto
Hablando de texto en 3D, recuerdo algunas palabras artísticas en Word en mis primeros años:
Luego, TextGeometry se puede usar para crear formas de texto tridimensionales.
El uso de formas de texto requiere descargar y citar bibliotecas de fuentes adicionales. Aquí, tomemos la fuente helvetiker como ejemplo.
Cita:
<script type = "text/javaScript" src = "Your ruta/helvetiker_regular.typeface.json"> </script>
El constructor de textgeometry es:
Tres.textgeometría (texto, parámetros)
El texto es una cadena literal;
Los parámetros son objetos compuestos por los siguientes parámetros:
・ Tamaño: tamaño de fuente, generalmente la altura de las letras mayúsculas
・ Altura: el grosor del texto
・ Curvesegments: El número de segmentos de arco hace que la curva del texto sea más suave
・ FUNT: FONT, el valor predeterminado es 'Helvetiker' y el archivo de fuentes que debe referenciarse
・ Peso: el valor es 'normal' o 'en negrita', lo que indica si es más grueso
・ Estilo: el valor es 'normal' o 'cursiva', que indica si la cursiva es cursiva
・ Biselenable: valor booleano, ya sea para usar chaflán, que significa cortar oblicuamente en el borde
・ Biselthickness: espesor del chaflán
・ Biselize: ancho de chaflán
Cree un texto tridimensional: new THREE.TextGeometry('Hello', {size: 1, height: 1})， su efecto es:
Los materiales y la iluminación se pueden ajustar adecuadamente para lograr el efecto deseado:
// Objeto brillante de metal var Material = nuevo tres.MeshphongMaterial ({color: 0xffff00, especular: 0xffff00, // Especifique el brillo del material y el color de la parte destacada. Si se establece en el mismo color que la propiedad de color, otro material que es más similar al metal se obtendrá. Si se establece en gris, se verá como un plástico Shininess: 0/especifica el brillo de la parte de resaltado, el valor resaltado. // Luz direccional var light = new Three.DirectionAllight (0xffffff); light.position.set (-5, 10, 5); escena.add (light);Código fuente:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js prueba Six </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </able> </body> <script tipo = "text/javaScript" src = "js/tres/mínimo" < renderer.setClearColor (0x0000000); VAR Scene = new Three.scene (); // cámara var cámara = nueva tres.tográficacamera (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.Position.set (5, 5, 20); Camera.lookat (nuevo tres.vector3 (1, 0, 0)); escena.add (cámara); // VAR Material = nuevo tres.MeshBasicMaterial ({// color: 0xffff00, // wireframe: true //}); // Metal Shining Object var Material = nuevo tres.MeshphongMaterial ({Color: 0xffff00, especular: 0xffff00, // Especifique el brillo del material y el color de la parte destacada. Si se establece en el mismo color que la propiedad de color, otro material más bajo metal se obtendrá. Si se establece en Gray Gray, se verá como un plástico Shininess: 0 // especificando el brillo de la parte destacada, el valor de la parte superior, el valor de los 30 años. // Direction Light Var Light = new Three.DirectionAllight (0xffffff); light.position.set (-5, 10, 5); escena.add (luz); // Load Font var Loader = new Three.FontLoader (); Loader.load ('./ Helvetiker_regular.typeface.json', function (font) {var malh = new tres.mesh (new Three.TextGeometry ('Hello', {font: font, size: 1, altura: 1}), material); escena.add (mesh); // renderer.render (escena, cámara);}); } </script> </html>2. Formas personalizadas
Para las formas no proporcionadas por tres.js, se pueden proporcionar formas personalizadas para crear.
Dado que las formas personalizadas requieren una especificación manual de cada posición de vértice y conexión de vértice, si la forma es muy compleja, los cálculos del programador serán relativamente grandes. En este caso, se recomienda crear un modelo en un software de modelado como 3DS Max y luego importarlo a la escena utilizando tres.js, que será más eficiente y conveniente.
Formas personalizadas Use la clase Geometry , que es la clase principal de otras formas geométricas como CubeGeometry , SphereGeometry , etc., y su constructor es:
THREE.Geometry()
Inicialice una geometría, luego configure la posición del vértice y el estado de conexión del vértice:
Código fuente:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js Test Six-Two</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.js"></script> <script type = "text/javascript"> function init () {var renderer = new tres.webglrenderer ({Canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); VAR Scene = new Three.scene (); // cámara var cámara = nueva tres.tográficacamera (-5, 5, 3.75, -3.75, 0.1, 100); Camera.Position.set (25, 25, 25); Camera.lookat (nuevo tres.vector3 (0, 0, 0)); escena.add (cámara); VAR Material = nuevo tres.MeshBasicMaterial ({color: 0xffff00, wireframe: true}); // Inicializar la geometría var geometry = new Thre.Geometry (); // Establecer la posición del vértice // los 4 vértices superiores geometry.vertices.push (nuevo tres.vector3 (-1, 2, -1)); geometry.vertices.push (nuevo tres.vector3 (1, 2, -1)); geometry.vertices.push (nuevo tres.vector3 (1, 2, 1)); geometry.vertices.push (nuevo tres.vector3 (-1, 2, 1)); geometry.vertices.push (nuevo tres.vector3 (-1, 2, 1)); geometry.vertices.push (nuevo tres.vector3 (-1, 2, 1)); geometry.vertices.push (nuevo tres.vector3 (-1, 2, 1)); geometry.vertices.push (nuevo tres.vector3 (-1, 2, 1)); // Los 4 vértices inferiores geometry.vertices.push (nuevo tres.vector3 (-2, 0, -2)); geometry.vertices.push (nuevo tres.vector3 (2, 0, -2)); geometry.vertices.push (nuevo tres.vector3 (2, 0, 2)); geometry.vertices.push (nuevo tres.vector3 (2, 0, 2)); geometry.vertices.push (nuevo tres.vector3 (-2, 0, 2)); // establecer el estado de conexión de vértice // top geometry.faces.push (nuevo tres.face3 (0, 1, 3)); geometry.faces.push (nuevo tres.face3 (1, 2, 3)); // geometry.faces.push (nuevo tres.face4 (0, 1, 2, 3)); // Bottom Geometry.faces.push (nuevo tres.face3 (4, 5, 6)); geometry.faces.push (nuevo tres.face3 (5, 6, 7)); // geometry.faces.push (nuevo tres.face4 (4, 5, 6, 7)); // lateral geometry.faces.push (nuevo tres.face3 (1, 5, 6)); geometry.faces.push (nuevo tres.face3 (6, 2, 1)); geometry.faces.push (nuevo tres.face3 (2, 6, 7)); geometry.faces.push (nuevo tres.face3 (7, 3, 2)); geometry.faces.push (nuevo tres.face3 (3, 7, 0)); geometry.faces.push (nuevo tres.face3 (7, 4, 0)); geometry.faces.push (nuevo tres.face3 (0, 4, 5)); geometry.faces.push (nuevo tres.face3 (0, 4, 5)); geometry.faces.push (nuevo tres.face3 (0, 4, 5)); geometry.faces.push (nuevo tres.face3 (0, 5, 1)); // // cara compuesta de cuatro vértices // geometry.faces.push (nuevo tres.face4 (0, 1, 5, 4)); // geometry.faces.push (nuevo tres.face4 (1, 2, 6, 5)); // geometry.faces.push (nuevo tres.face4 (2, 3, 7, 6)); // geometry.faces.push (nuevo tres.face4 (3, 0, 4, 7)); Var malla = nueva tres.mesh (geometría, material); escena.add (malla); // render renderer.render (escena, cámara); } </script> </html> Cabe señalar que new THREE.Vector3(-1, 2, -1) crea un vector que se adjunta a geometry.vertices Vértices como posiciones de vértice.
Y una cara compuesta de tres vértices es creada por new THREE.Face3(0, 1, 2) y la agrega a geometry.faces . Los tres parámetros son los números de secuencia de los tres vértices en geometry.vertices . Si necesita establecer un parche que consta de cuatro vértices, puede usar de manera similar THREE.Face4 .
//Top geometry.faces.push(new THREE.Face4(0, 1, 2, 3));//Bottom geometry.faces.push(new THREE.Face4(4, 5, 6, 7));//Four sides geometry.faces.push(new THREE.Face4(0, 1, 5, 4));geometry.faces.push(new THREE.Face4(1, 2, 6, 5)); geometry.faces.push (nuevo tres.face4 (2, 3, 7, 6)); geometry.faces.push (nuevo tres.face4 (2, 3, 7, 6)); geometry.faces.push (nuevo tres.face4 (3, 0, 4, 7));
Lo anterior es el contenido completo de las formas de texto de aprendizaje de tres.js y formas personalizadas compiladas por el editor. El editor también ha compilado varios artículos relacionados sobre tres.js. Si lo necesita, puede verlo a través de los enlaces de los artículos relevantes a continuación. Espero que pueda ayudar a todos los que aprenden tres.js.