Предисловие
Редактор опубликовал о геометрических формах и материалах. Я считаю, что после того, как вы читали и узнали, мы можем использовать их для создания объектов. Наиболее часто используемым объектом является сетка, которая представляет собой объект, состоящий из вершин, краев, лиц и т. Д.; Другие объекты включают линейные сегменты, кости, системы частиц и т. Д. Чтобы создать объект, вам необходимо указать геометрическую форму и материал. Среди них геометрическая форма определяет положение вершины объекта и другой информации, а материал определяет цвет, текстуру и другую информацию объекта.
1. Создать сетку
В предыдущих статьях мы узнали, как создавать геометрические формы и материалы, и создать сетку очень просто, просто передайте геометрические формы и материалы в его конструктор. Наиболее часто используемым объектом является сетка, которая представляет геометрию, содержащую точки, линии и поверхности. Его конструктор:
Сетка (геометрия, материал)
Здесь давайте узнаем, как создать сетку с конкретным примером:
var material = new Three.meshmbertmaterial ({color: 0xffff00}); var geometry = new Three.cubegeometry (1, 2, 3); var mesh = new Three.mesh (Geometry, Material); Scene.add (Mesh);Если материал и геометрия не используются впоследствии, они также могут быть написаны вместе как:
var mesh = new Three.mesh (new Three.cubegeometry (1, 2, 3), новый три.
После добавления освещения результат:
Если материал не указан, материал с истинным каркасом будет случайным образом назначен каждый раз. Цвет после обновления страницы отличается. Одним из возможных эффектов является:
Исходный код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> 3.JS Test 9.1 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <scipt type = "text/javascript" src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webglenderer ({canvas: 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 (0, 0, 0)); Scene.add (камера); var material = new Three.meshmbertmaterial ({color: 0xffff00}); // var material = new Three.meshbasicmaterial ({// color: 0xffff00, // Wearframe: true //}); var geometry = new Three.cubegeometry (1, 2, 3); var mesh = new Three.mesh (геометрия, материал); Scene.add (Mesh); var light = new Three.DirectionAllight (0xffffff); Light.position.Set (20, 10, 5); Scene.add (свет); // render renderer.render (сцена, камера); } </script> </html>2. Изменить свойства
2.1 Измените материал
В дополнение к указанию материала в конструкторе, материал также может быть изменен после создания сетки:
var material = new.meshlambertmaterial ({color: 0xffff00}); var geometry = new Three.cubegeometry (1, 2, 3); var mesh = new Three.mesh (геометрия, материал); Scene.add (mesh); mesh.material = new Three.meshlambertmaterial ({color: 0xff0000});Последний цвет красный:
Исходный код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> 3.JS Test9.2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript" src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webglenderer ({canvas: 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 (0, 0, 0)); Scene.add (камера); var material = new.meshlambertmaterial ({color: 0xffff00}); var geometry = new Three.cubegeometry (1, 2, 3); var mesh = new Three.mesh (геометрия, материал); Scene.add (Mesh); mesh.material = new Three.meshmbertmaterial ({color: 0xff0000}); var light = new Three.DirectionAllight (0xffffff); Light.position.Set (20, 10, 5); Scene.add (свет); // рендеринг рендерер renderer.render (сцена, камера); } </script> </html>2.2 Положение, увеличение, ротация
Положение, масштабирование и вращение являются тремя общими свойствами объектов. Поскольку Three.mesh основан на Three.object3d, он содержит три атрибута: масштаб, вращение и положение. Все это три экземпляра Vector3, поэтому метод изменения их значений одинаков, здесь занимая позицию в качестве примера.
Три. Vector3 имеет три атрибута: x, y и z. Если вы установите только один из атрибутов, вы можете использовать следующий метод:
mesh.position.z = 1;
Если вам нужно установить несколько свойств одновременно, вы можете использовать следующие два метода:
mesh.position.set (1,5, -0,5, 0);
или:
mesh.position = new Three.Vector3 (1,5, -0,5, 0);
Соответствующим атрибутом масштабирования является масштаб, а соответствующим атрибутом вращения является вращение. Конкретный метод такой же, как приведенный выше пример, который указывает масштабирование или вращение вдоль трех оси x, y и z соответственно.
Исходный код:
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> 3.JS Test9.3 </title> </head> <body onload = "init ()"> <canvas id = "machanvas"> </canvas> </body> <script type = "text/javascript" src = "js/three.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new Three.webglenderer ({canvas: 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 (0, 0, 0)); Scene.add (камера); var material = new.meshlambertmaterial ({color: 0xffff00}); var geometry = new Three.cubegeometry (1, 2, 3); var mesh = new Three.mesh (геометрия, материал); Scene.add (Mesh); mesh.position.set (1,5, -0,5, 0); mesh.position = new Three.Vector3 (1,5, -0,5, 0); mesh.position.z = 1; var light = new Three.DirectionAllight (0xffffff); Light.position.Set (20, 10, 5); Scene.add (свет); DrawAxes (сцена); // render renderer.render (сцена, камера); } функция DrawAxes (Scene) {// x-ось var xgeo = new Three.geometry (); xgeo.vertices.push (new Three.Vector3 (0, 0, 0)); xgeo.vertices.push (new Three.Vector3 (1, 0, 0)); var xmat = new Three.linebasicmaterial ({color: 0xff0000}); var xaxis = new.line (xgeo, xmat); Scene.add (xaxis); // ось y var ygeo = new Three.geometry (); ygeo.vertices.push (new Three.Vector3 (0, 0, 0)); ygeo.vertices.push (new Three.Vector3 (0, 1, 0)); var ymat = new Three.linebasicmaterial ({color: 0x00ff00}); var yaxis = new Three.line (ygeo, ymat); Scene.add (Yaxis); // ось z var zgeo = new Three.geometry (); zgeo.vertices.push (new Three.Vector3 (0, 0, 0)); zgeo.vertices.push (new Three.Vector3 (0, 0, 1)); var zmat = new Three.linebasicmaterial ({color: 0x00ccff}); var Zaxis = new Three.line (ZGEO, ZMAT); Scene.add (Zaxis); } </script> </html>Содержание этой статьи заканчивается здесь. Статья представляет сетку в Three.js с помощью подробных примеров и картин. Я надеюсь, что эта статья будет полезна всем, чтобы выучить три.