1. Куб
Хотя название этой формы - кубгеометрия, на самом деле это кубоид, то есть длина, ширина и высота могут быть установлены на разные значения. Его конструктор:
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
Ширина: длина в направлении x
Высота: длина в направлении Y
Глубина: длина в направлении z
Ширины: количество сегментов в направлении x (необязательное, значение по умолчанию 1)
Высота: количество сегментов в направлении Y (то же самое, что и выше)
глубины: количество сегментов в направлении Z (так же, как и выше)
Невозможный:
var material = new.meshbasicmaterial ({color: 0xffff00, карман: true}); drawCube (сцена, материал); функция DrawCube (сцена, материал) {var cube = new.mesh (new Three.cubegeometry (1, 2, 3), материал); scene.add (cube);}Положение по умолчанию объекта является источником, а для куба - позиция его геометрического центра на начале координат.
Сегментация:
var cube = new Three.mesh (новый тройка. Кабегеометрия (1, 2, 3, 2, 2, 3), материал);
Почему так много злых строк? Выпуск версии. Версия R73:
Обратите внимание, что эта сегментация представляет собой сегментирование шести грани , а не вокселей куба, поэтому она не сегментирована в середине куба, и только шесть сторон сегментированы.
2. Плана
Плана здесь (плоскость) на самом деле является прямоугольником, а не плоскостью бесконечного размера в математическом смысле. Его конструктор:
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
Ширина: длина в направлении x
Высота: длина в направлении Y
Ширины: количество сегментов в направлении x (необязательное, значение по умолчанию 1)
Высота: количество сегментов в направлении Y (то же самое, что и выше)
Новые три. Планегеометрия (2, 4); Созданная плоскость находится в плоскости, где расположены ось X и ось Y, и эффект выглядит следующим образом:
3. Сфера
Конструктор сферы (сфераггеометрия):
Thre.spheregeometry (Radius, Segmentswidth, SegmentShight, Phistart, Philength, Thetastart, Thetalength) // Радиус: Radius // segmentswidth: количество сегментов на долготу // segmentsheight: radius at atembortest: radius: radius: radius/ radius: Начало широты // Тетала: радиус в начале широты
3.1 Количество сегментов широты и долготы
Во -первых, давайте поймем сегмент и сегмент. Используйте var sphere = new Three.spheregeometry (3, 8, 6), чтобы создать сферу с радиусом 3, долгота деленная на 8 частей и широты, разделенные на 6 частей, как показано на рисунке ниже.
Segmentswidth эквивалентна долготе, разрезанную на несколько лепестков, в то время как SegmentShight эквивалентна широте, разрезанной на несколько слоев.
Эффект новой три.
Эффект новой три.
Эффект новой тройки.
В реализации базового уровня графика не существует концепции кривых, и все кривые состоят из множества полиночных приближений. Для сфер, когда эти два значения велики, образуется многогранник приблизительно как сферы.
3.2 ДЛЯ ДЛЯ ДОЛЖНОЙ
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3) означает, что начальная долгота - Math.pi / 6, а продолжительность долготы - Math.pi / 3.
Эффекты следующие:
Обратите внимание, что сегментная заседания здесь означает, что долгота делится на 8 блоков в области, где Math.pi/6 пересекает Math.pi/3, вместо долготы всей сферы, разделенной на 8 блоков, прежде чем оценивать деталь в этом диапазоне долготы.
3.3 Радиан широты
То же самое относится и к радианам широты. new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3) означает, что широта простирается от Math.pi / 6 над Math.pi / 3.
Эффекты следующие:
Эффект new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)
4. исходный код
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> 3.JS Test 4 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript"> </canvas> </body> <script type = "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 (-5, 5, 3,75, -3,75, 0,1, 100); Camera.position.Set (25, 25, 25); Camera.lookat (новый три. Vector3 (0, 0, 0)); Scene.add (камера); // Материал VAR MATERAL = NEW THRE.MESHBASICMaterial ({Color: 0xffff00, каркас: true}); DrawCube (сцена, материал); // cube // Drawlane (сцена, материал); // плоскость // DrawSphere (сцена, материал); // sphere // renderer renderer.render (сцена, камера); } функция drawCube (сцена, материал) {var cube = new Three.mesh (new Three.cubegeometry (1, 2, 3, 2, 2, 3), материал); Scene.add (куб); } функция DratePlane (сцена, материал) {var lanse = new Three.Mesh (новый три. Планегеометрия (2, 4), материал); Scene.add (плоскость); } Функция DRATSPHERE (сцена, материал) {var sphere = new Three.Mesh (new Three.Spheregeometry (3, 18, 12), Material); // var sphere = new Three.mesh (новый три. 0, math.pi * 2, math.pi / 6, math.pi / 3), материал); // var sphere = new Three.mesh (новый три. Scene.add (сфера); } </script> </html>Вышеуказанное - все содержание геометрических форм, изученных Three.js. Редактор сообщит статьи о трех. JS один за другим. Пожалуйста, продолжайте обращать внимание на wulin.com.