1. Forma do texto
Falando em texto em 3D, lembro -me de algumas palavras artísticas em palavras nos meus primeiros anos:
Em seguida, TextGeometry pode ser usado para criar formas de texto tridimensionais.
O uso de formas de texto requer download e citar bibliotecas de fontes adicionais. Aqui, vamos tomar a fonte helvetiker como exemplo.
Citar:
<script type = "text/javascript" src = "your path/helvetiker_regular.typeface.json"> </sCript>
O construtor da textgeometria é:
Três.TextGeometria (Texto, parâmetros)
O texto é uma corda literal;
Parâmetros são objetos compostos pelos seguintes parâmetros:
・ Tamanho: tamanho da fonte, geralmente a altura das letras maiúsculas
・ Altura: a espessura do texto
・ Curvesegmentos: o número de segmentos de arco torna a curva do texto mais suave
・ Fonte: Fonte, Padrão é 'Helvetiker' e o arquivo de fonte que precisa ser referenciado
・ Peso: o valor é 'normal' ou 'ousado', indicando se é mais espesso
・ Estilo: o valor é 'normal' ou 'itálico', indicando se o itálico é itálico
・ Bavellenabled: valor booleano, seja para usar chanfro, que significa cortar obliquamente na borda
・ Charanda: espessura de chanfro
・ Chanksize: largura de chanfro
Crie um texto tridimensional: new THREE.TextGeometry('Hello', {size: 1, height: 1})， seu efeito é:
Materiais e iluminação podem ser ajustados adequadamente para alcançar o efeito desejado:
// Metal Shining Object var material = new Three.SeshphongMaterial ({color: 0xffff00, especular: 0xffff00, // Especifique o brilho do material e a cor da parte de destaque. Se definido para a mesma cor, que é a cor de plástico: o material mais semelhante ao metal será obtido. 30}); // luz direcional var luz = novo três.directionAllight (0xffffff); luz.Position.set (-5, 10, 5); cenário.add (luz);Código -fonte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js teste seis </ititle> </ad head> <corpo onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <cript type = "text/javrasscrass" srcript "> </canvas> </" <!-Encontre mais informações em https://github.com/mrdoob/three.js/tree/master/examples/fonts-> <script type = "text/javascript"> function init () {var renderer = new Three.weblRereRer ({{Canvas: document.MementById (vareador de três.WeblReRERR ({{Canvas: renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // câmera var câmera = new Three.tográficoCamera (-2,5, 2,5, 1.875, -1,875, 0,1, 100); câmera.Position.set (5, 5, 20); câmera.lookat (novo três.Vector3 (1, 0, 0)); cena.add (câmera); // var material = new Three.MeshBasicMaterial ({// color: 0xffff00, // wireframe: true //}); // Objeto de metal brilhante var material = new Three.SeshphongMaterial ({color: 0xffff00, especular: 0xffff00, // Especifique o brilho do material e a cor da parte de destaque. Se definido como a mesma cor, a cor de cor, a cor mais, 0/ mais material de metal será obtido. // Direction Light Var Light = New Three.DirectionAllight (0xffffff); luz.Position.set (-5, 10, 5); cenário.Add (luz); // Carregar font var loader = new Three.FontLoader (); carregador.load ('./ helvetiker_regular.typeface.json', function (font) {var mesh = new Three.Mesh (new Three.Textgeometry ('hello', {font: font, tamanho: 1, altura: 1}), material); cena.add (mSh); // render. } </script> </html>2. Formas personalizadas
Para formas não fornecidas por três.js, são fornecidas formas personalizadas para criar.
Como as formas personalizadas requerem especificação manual de cada posição de vértice e conexão de vértice, se a forma for muito complexa, os cálculos do programador serão relativamente grandes. Nesse caso, é recomendável criar um modelo em um software de modelagem, como o 3DS Max, e depois importá -lo para a cena usando três.js, que será mais eficiente e conveniente.
As formas personalizadas usam a classe Geometry , que é a classe pai de outras formas geométricas, como CubeGeometry , SphereGeometry , etc., e seu construtor é:
THREE.Geometry()
Inicialize uma geometria e defina a posição do vértice e o status da conexão do vértice:
Código -fonte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js teste seis-dois </ititle> </head> <corpo onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <cript type = "text/javs/javas" </cut) <script type = "text/javascript"> function init () {var renderer = new Three.Webglrenderer ({Canvas: document.getElementById ('mainCanes')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // Câmera var câmera = new Three.tográficoCamera (-5, 5, 3,75, -3,75, 0,1, 100); câmera.Position.set (25, 25, 25); câmera.Lookat (new Three.Vector3 (0, 0, 0)); cena.add (câmera); var material = new Three.MeshBasicMaterial ({color: 0xffff00, Wireframe: true}); // Inicialize a geometria var geometria = new Three.geometry (); // Defina a posição do vértice // Top 4 vértices 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)); 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)); // os 4 vértices inferiores 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)); // Defina o status da conexão do vértice // 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)); // lateral geometry.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)); geometry.faces.push (new Three.face3 (0, 5, 1)); // // face composta por quatro vértices // 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 (geometria, material); cena.add (malha); // renderize renderer.render (cena, câmera); } </script> </html> Deve -se notar que new THREE.Vector3(-1, 2, -1) cria um vetor que é anexado à Array geometry.vertices como posições de vértice.
E uma face composta por três vértices é criada por new THREE.Face3(0, 1, 2) e anexá -lo à matriz geometry.faces . Os três parâmetros são os números de sequência dos três vértices em geometry.vertices . Se você precisar definir um patch composto por quatro vértices, poderá usar THREE.Face4 .
// geometry superior.faces.push (new Three.face4 (0, 1, 2, 3)); // Geometry.faces.faces.push (new Three.face4 (4, 5, 6, 7)); // quatro laterais geometry.faces.push (new Three.face4 (0, 1, 5, 4)); geometria.faces.faces.push (novo. 5);
O exposto acima é o conteúdo inteiro das formas de texto de aprendizado de três.js e formas personalizadas compiladas pelo editor. O editor também compilou vários artigos relacionados sobre três.js. Se precisar, você pode visualizá -lo através dos links dos artigos relevantes abaixo. Espero que possa ajudar todos que aprendem três.js.