1. Форма текста
Говоря о 3D -тексте, я помню несколько художественных слов слова в мои первые годы:
Затем TextGeometry может использоваться для создания трехмерных текстовых форм.
Использование текстовых форм требует загрузки и ссылки на дополнительные библиотеки шрифтов. Здесь давайте возьмем шрифт helvetiker в качестве примера.
Цитировать:
<script type = "text/javascript" src = "your path/helvetiker_regular.typeface.json"> </script>
Конструктор текстометрии:
Three.TextGeometry (текст, параметры)
Текст - буквальная строка;
Параметры - это объекты, состоящие из следующих параметров:
・ Размер: размер шрифта, как правило, высота заглавных букв
・ Высота: толщина текста
・ Curvesegments: количество дуговых сегментов делает кривую текста более плавкой
・ Font: Font, по умолчанию - «Helvetiker», и файл шрифта, на который необходимо ссылаться
・ Вес: значение «нормальное» или «смело», указывая, толще ли оно
・ Стиль: ценность «нормальная» или «курсив», указывая, является ли курсивом курсивом
・ Bevelensabled: логическое значение, будь то лача, означающая косо на краю
・ Bevelthicness: толщина фаска
・ Beevelsize: ширина часы
Создайте трехмерный текст: new THREE.TextGeometry('Hello', {size: 1, height: 1})， его эффект:
Материалы и освещение могут быть отрегулированы соответствующим образом для достижения желаемого эффекта:
// Металлический сияющий объект Material = new Three.meshphongmaterial ({color: 0xffff00, Specular: 0xffff00, // Укажите яркость материала, и цвет детали выделения. Если будет установлен на тот же цвет, что и свой свойство, другой материал, который более похож на металл. 30}); // направление света var light = new Three.DirectionAllight (0xffffff); Light.position.Set (-5, 10, 5); Scene.Add (Light);Исходный код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> 3.JS Test Six </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript"> </canvas> </body> <script = "javascript" src = "js/three.min.js"> </script> <!-Найдите больше информации по адресу https://github.com/mrdoob/three.js/tree/master/examples/fonts-> <script type = "text/javascript"> function init () {var renderer = new. document.getElementbyId ('maincanvas')}); renderer.setClearcolor (0x0000000); var scene = new Three.Scene (); // камера Var Camera = new Three.othographicCamera (-2,5, 2,5, 1,875, -1,875, 0,1, 100); Camera.position.Set (5, 5, 20); Camera.lookat (новый три. Vector3 (1, 0, 0)); Scene.add (камера); // var material = new.meshbasicmaterial ({// color: 0xffff00, // карман: true //}); // Металлический сияющий объект MATERAL = NEW THRE.MESHPHONGMATERIAL ({Color: 0xffff00, Specular: 0xffff00, // Укажите яркость материала и цвет детали выделения. Если будет установлен тот же цвет, что и цветовое свойство, будет получено еще один более металлический материал. // направление света var light = new Three.DirectionAllight (0xffffff); Light.position.Set (-5, 10, 5); Scene.add (свет); // загрузить шрифт var loader = new Three.fontloader (); loader.load ('./ helvetiker_regular.typeface.json', function (font) {var mesh = new Three.mesh (new Three.Textgeometry ('Hello', {Font: Font, размер: 1, высота: 1}), материал); сцена. } </script> </html>2. Пользовательские формы
Для форм, не предоставленных Three.js, для создания могут быть предоставлены пользовательские формы.
Поскольку пользовательские формы требуют ручной спецификации каждого положения вершины и соединения вершины, если форма очень сложна, расчеты программиста будут относительно большими. В этом случае рекомендуется создать модель в программном обеспечении для моделирования, такого как 3DS Max, а затем импортировать ее в сцену с использованием Three.js, что будет более эффективным и удобным.
Пользовательские формы используют класс Geometry , который является родительским классом других геометрических фигур, таких как CubeGeometry , SphereGeometry , и т. Д., И его конструктор:
THREE.Geometry()
Инициализируйте геометрию, затем установите положение вершины и состояние соединения вершины:
Исходный код:
<! 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 Three.webglerenderer ({canvas: document.getElementbyid ('maincanvas')}); renderer.setClearcolor (0x0000000); var scene = new Three.Scene (); // камера Var Camera = new Three.othographicCamera (-5, 5, 3,75, -3,75, 0,1, 100); Camera.position.Set (25, 25, 25); Camera.lookat (новый три. Vector3 (0, 0, 0)); Scene.add (камера); var material = new.meshbasicmaterial ({color: 0xffff00, карман: true}); // инициализировать геометрию var geometry = new Three.geometry (); // Установить положение вершины // Верхние вершины geometry.pertices.push (new Three.Vector3 (-1, 2, -1)); geometry.pertices.push (new Three.Vector3 (1, 2, -1)); geometry.pertices.push (new Three.Vector3 (1, 2, 1)); geometry.pertices.push (new Three.Vector3 (-1, 2, 1)); geometry.pertices.push (new Three.Vector3 (-1, 2, 1)); geometry.pertices.push (new Three.Vector3 (-1, 2, 1)); geometry.pertices.push (new Three.Vector3 (-1, 2, 1)); geometry.pertices.push (new Three.Vector3 (-1, 2, 1)); // нижние 4 вершины geometry.pertices.push (new Three.Vector3 (-2, 0, -2)); geometry.pertices.push (new Three.Vector3 (2, 0, -2)); geometry.pertices.push (new Three.Vector3 (2, 0, 2)); geometry.pertices.push (new Three.Vector3 (2, 0, 2)); geometry.pertices.push (new Three.Vector3 (-2, 0, 2)); // Установить состояние подключения вершины // верхняя геометрия.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)); // нижняя геометрия.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)); // боковая геометрия.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)); // // лицо, состоящее из четырех вершин // 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 (геометрия, материал); Scene.add (Mesh); // render renderer.render (сцена, камера); } </script> </html> Следует отметить, что new THREE.Vector3(-1, 2, -1) создает вектор, который добавляется к массиве geometry.vertices в качестве позиций вершины.
И лицо, состоящее из трех вершин, создается new THREE.Face3(0, 1, 2) и добавьте его в массив geometry.faces . Три параметра - это номера последовательности трех вершин в geometry.vertices . Если вам нужно установить патч, состоящий из четырех вершин, вы можете аналогично использовать THREE.Face4 .
// Top Geometry.faces.push (new Three.face4 (0, 1, 2, 3)); // нижняя геометрия.faces.push (new Three.face4 (4, 5, 6, 7)); // Геометрия четырех сторон.push.push (new.face4 (0, 1, 5, 4); Geometry.face.push (new.face4 (1, 1, 5, 4); Geometry.face.push (new.face4 (1, 1, 5, 4); 5)); geometry.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));
Выше приведено все содержание форм обучения Three.js обучения и пользовательские формы, составленные редактором. Редактор также собрал несколько связанных статей о трех. Если вам это нужно, вы можете просмотреть его по ссылкам соответствующих статей ниже. Я надеюсь, что это может помочь всем, кто изучает три.