Three.js

Материалы

Material →

LineBasicMaterial

Материал для рисования геометрических фигур в каркасном стиле обычными линиями.

Пример

var material = new THREE.LineBasicMaterial( {
  color: 0xffffff,
  linewidth: 1,
  linecap: 'round', // ignored by WebGLRenderer (игнорируется WebGLRenderer'ом)
  linejoin:  'round' // ignored by WebGLRenderer (игнорируется WebGLRenderer'ом)
} );

Другие примеры

WebGL / buffergeometry / drawcalls
WebGL / buffergeometry / lines
WebGL / buffergeometry / lines / indexed
WebGL / decals
WebGL / geometry / nurbs
WebGL / geometry / shapes
WebGL / geometry / spline / editor
WebGL / interactive / buffergeometry
WebGL / interactive / voxelpainter
WebGL / lines / colors
WebGL / lines / cubes
WebGL / lines / dashed
WebGL / lines / sphere
WebGL / lines / splines
WebGL / materials
WebGL / physics / rope

Конструктор

LineBasicMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Общие методы смотрите в описании базового класса Material.

Исходники

Material →

LineDashedMaterial

Материал для рисования геометрических фигур в каркасном стиле пунктирными линиями.

Пример

var material = new THREE.LineDashedMaterial( {
  color: 0xffffff,
  linewidth: 1,
  scale: 1,
  dashSize: 3,
  gapSize: 1,
} );

Другие примеры

WebGL / lines / dashed
Canvas / lines /dashed

Конструктор

LineDashedMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Общие методы смотрите в описании базового класса Material.

Исходники

Material

Абстрактный, базовый класс для материалов.
Материалы описывают внешний вид объектов. Они определены (в основном) независимыми от визуализатора (рендерера), так что не придется переписывать материалы, если вы решили использовать другой визуализатор.
Перечисленные ниже свойства и методы наследуются всеми другими типами материала (хотя и могут иметь разные значения по умолчанию).

Конструктор

Material()

Конструктор создает общий (универсальный) материал.

Свойства

Методы

В этом классе доступны методы EventDispatcher.

Исходники

Material →

MeshBasicMaterial

Материал для рисования геометрических элементов в простом, затушеванном виде (плоском (flat) или каркасном (wireframe).
На этот материал не влияет освещение.
По умолчанию будет отображаться в виде плоских многоугольников. Чтобы нарисовать сетку в виде каркаса, установите свойство wireframe как true.

Конструктор

MeshBasicMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Для информации об общих методах смотрите базовый класс Material.

Исходники

Material →

MeshDepthMaterial

Материал для рисования геометрических элементов фигуры в глубину. Глубина зависит от ближней и дальней плоскостей отсечения камеры. Чем белее цвет, тем ближе находится элемент фигуры, чем темнее - тем дальше.

Конструктор

MeshDepthMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Для информации об общих методах смотрите базовый класс Material.

Исходники

Material →

MeshLambertMaterial

Материал для матовых поверхностей, без зеркальных бликов.
Этот материал использует для расчета коэффициента отражения модель Ламберта, не соответствующую физическим принципам. (Вот статья Википедии «Закон Ламберта» на русском языке. Он может хорошо имитировать некоторые поверхности (такие как необработанная древесина или камень), но не в состоянии воспроизвести блестящие поверхности с зеркальными бликами (например, лакированная древесина).
Затенение рассчитывается с использованием модели тонирования (затенения) Гуро (Gouraud shading model). При этом вычисляется затенение для вершины (т.е. в вершинном шейдере) и результат интерполируется по граням многоугольника (полигона).
Благодаря простоте моделей освещения и отражения, при использовании данного материала производительность вычислений будет выше, чем у MeshPhongMaterial, MeshStandardMaterial или MeshPhysicalMaterial ценой некоторого снижения графической точности.

Конструктор

MeshLambertMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Для информации об общих методах смотрите базовый класс Material.

Исходники

Material →

MeshNormalMaterial

Материал отображающий векторы нормалей как цвета в RGB-формате.

Конструктор

MeshNormalMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Для информации об общих методах смотрите базовый класс Material.

Исходники

Material →

MeshPhongMaterial

Материал для блестящих поверхностей с зеркальными бликами.
Этот материал использует для расчета коэффициента отражения модель Блинна-Фонга (Blinn-Phong model), не соответствующую физическим принципам. В отличие от модели Ламберта, используемой в MeshLambertMaterial, данный материал может имитировать блестящие поверхности с зеркальными бликами (такие как лакированная древесина).
Затенение рассчитывается с помощью модели затенения по Фонгу (Phong shading model). Здесь вычисляется затенение на пиксель (то есть, в шейдере фрагментов или по другому в пиксельном шейдере), которое дает более точные результаты, чем модель Гуро (Gouraud), используемая в MeshLambertMaterial, за счет некоторого снижения производительности. MeshStandardMaterial и MeshPhysicalMaterial также используют эту модель затенения.
При использовании данного материала, производительность в целом будет больше, чем у MeshStandardMaterial и MeshPhysicalMaterial, ценой некоторого снижения графической точности.

Конструктор

MeshPhongMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Для информации об общих методах смотрите базовый класс Material.

Исходники

Material →  MeshStandardMaterial →

MeshPhysicalMaterial

Расширение MeshStandardMaterial, позволяющее увеличить регулировку способности к отражению.
Обратите внимание, что при использовании этого материала, для достижения наилучших результатов, всегда следует указывать карту окружения.

Примеры

webgl / materials / variations / physical
webgl / materials / reflectivity

Конструктор

MeshPhysicalMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовые классы Material и MeshStandardMaterial.

Методы

Для информации об общих методах смотрите базовые классы Material и MeshStandardMaterial.

Исходники

Material →

MeshStandardMaterial

Стандартный, физически обоснованный материал, using Metallic-Roughness workflow.
Визуализация на физических принципах (physically based rendering - PBR) в последнее время стала стандартом во многих приложениях по 3D графике, таких как Unity, Unreal и 3D Studio Max.
Такой подход отличается от более старых попыток тем, что вместо использования приближений метода, которым свет взаимодействует с поверхностью, используется физически правильная модель. Идея заключается в том, что вместо того, чтобы подбирать материалы для хорошего вида при конкретном освещении, можно создать материал, который будет «правильно» реагировать при любых вариантах освещения.
На практике это дает более точный и реалистичный результат, чем у MeshLambertMaterial или MeshPhongMaterial, за счет более высоких затрат на вычисления.
Затенение рассчитывается тем же самым способом, что и для MeshPhongMaterial, с использованием модели затенения по Фонгу (Phong shading model). Здесь вычисляется затенение на пиксель (то есть, в шейдере фрагментов или по другому в пиксельном шейдере), которое дает более точные результаты, чем модель Гуро (Gouraud), используемая в MeshLambertMaterial, за счет некоторого снижения производительности.
Обратите внимание, при использовании данного материала, для достижения наилучших результатов, всегда следует указывать карту окружения.
Для начального ознакомления с идеей PBR и настройкой PBR-материала, обратитесь к следующим статьям, написанным народом сайта marmoset:

• Basic Theory of Physically Based Rendering - Базовая теория визуализации на физических принципах
• Physically Based Rendering and You Can Too - Это вы можете: визуализация на физических принципах.

Технические подробности подхода, используемого в three.js (и большинстве других систем PBR), можно найти в этой статье (pdf) от диснеевской студии анимации, написанную Брентом Барли (Brent Burley).

Конструктор

MeshStandardMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Для информации об общих методах смотрите базовый класс Material.

Исходники

Material →  MeshPhongMaterial →

MeshToonMaterial

Расширение MeshPhongMaterial с тоновой штриховкой. with toon shading.

Пример

webgl / materials / variations / toon

Конструктор

MeshToonMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовые классы Material и MeshPhongMaterial.

Методы

Для информации об общих методах смотрите базовые классы Material и MeshPhongMaterial.

Исходники

Material →

PointsMaterial

Материал, по умолчанию используемый классом Points.

Пример

// This will add a starfield to the background of a scene
// Этот код добавит звездное поле на задний план сцены
var starsGeometry = new THREE.Geometry();

for ( var i = 0; i < 10000; i ++ ) {
  var star = new THREE.Vector3();
  star.x = THREE.Math.randFloatSpread( 2000 );
  star.y = THREE.Math.randFloatSpread( 2000 );
  star.z = THREE.Math.randFloatSpread( 2000 );

  starsGeometry.vertices.push( star );
}

var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } );
var starField = new THREE.Points( starsGeometry, starsMaterial );

scene.add( starField );

Другие примеры

misc / controls / fly
webgl / buffergeometry / drawcalls
webgl / BufferGeometry / points
webgl / BufferGeometry / points / interleaved
webgl / camera
webgl / geometry / convex
webgl / geometry / shapes
webgl / interactive / raycasting / points
webgl / multiple / elements / text
webgl / points / billboards
webgl / points / billboards / colors
webgl / points / dynamic
webgl / points / random
webgl / points / sprites
webgl / trails

Конструктор

PointsMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Для информации об общих методах смотрите базовый класс Material.

Исходники

ShaderMaterial →

RawShaderMaterial

Данный класс работает также как класс ShaderMaterial, за исключением того, что определения встроенных атрибутов и униформ не добавляются автоматически к коду шейдера GLSL.

Пример

var material = new THREE.RawShaderMaterial( {

  uniforms: {
    time: { value: 1.0 }
  },
  vertexShader: document.getElementById( 'vertexShader' ).textContent,
  fragmentShader: document.getElementById( 'fragmentShader' ).textContent,

} );

Другие примеры

WebGL / buffergeometry / rawshader
WebGL / buffergeometry / instancing / billboards
WebGL / buffergeometry / instancing / dynamic
WebGL / buffergeometry / instancing / interleaved / dynamic
WebGL / buffergeometry / instancing
WebGL / interactive / instances / gpu
WebGL / raymarching / reflect

Конструктор

RawShaderMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовые классы Material и ShaderMaterial.

Методы

Для информации об общих методах смотрите базовые классы Material и ShaderMaterial.

Исходники

Material →

ShaderMaterial

Материал отображаемый с помощью собственных (заказных) шейдеров. Шейдер - это небольшая программа, написанная на языке GLSL для запуска на
блок графической обработки, т.е. видеокарта')" onmouseout="hide()">GPU. Можно использовать заказной шейдер, если требуется:

• реализовать эффект не включенный ни в один из встроенных материалов
• для повышения производительности объединить несколько объектов в одной Geometry или BufferGeometry

При использовании ShaderMaterial нужно учитывать следующие замечания:

• ShaderMaterial будет отображаться только с помощью WebGLRenderer, поскольку GLSL-код в свойствах vertexShader и fragmentShader должен быть скомпилирован и запущен на графическом процессоре, использующим WebGL.
• Начиная с версии THREE r72, в ShaderMaterial больше не поддерживается прямое назначение атрибутов. Взамен следует использовать экземпляр BufferGeometry (вместо экземпляра Geometry), воспользовавшися экземплярами BufferAttribute для определения настраиваемых атрибутов.
• Начиная с версии THREE r77, экземпляры WebGLRenderTarget или WebGLRenderTargetCube не должны больше использоваться как униформы. Вместо этого нужно воспользоваться свойством их текстуры.
• Встроенные атрибуты и униформы передаются шейдерам вместе с кодом. Если не требуется, чтобы WebGLProgram добавляла что-либо к коду шейдера, вместо данного класса можно использовать RawShaderMaterial.
• Для того, чтобы развернуть цикл for в GLSL с помощью препроцессора шейдера можно использовать директиву #pragma unroll_loop. Директива должна располагаться непосредственно над циклом. Форматирование цикла должно соответствовать определенному стандарту:
  ○  цикл должен быть нормализован
  ○  переменной цикла должна быть i
  ○  цикл должен использовать определенное форматирование пробелов.

  #pragma unroll_loop
  for ( int i = 0; i < 10; i ++ ) {
  
    // ...
  
  }

Пример

var material = new THREE.ShaderMaterial( {

  uniforms: {

    time: { value: 1.0 },
    resolution: { value: new THREE.Vector2() }

  },

  vertexShader: document.getElementById( 'vertexShader' ).textContent,
  fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );

Другие примеры

Шейдеры вершин и фрагментов

Для любого материала можно задать два разных вида шейдеров:

• Вначале запускается вершинный шейдер (vertex shader); он принимает атрибуты, вычисляет/управляет положение каждой отдельной вершиной и передает дополнительные данные шейдеру фрагмента.
• Вторым номером запускается шейдер фрагмента (fragment shader); он устанавливает цвет каждого отдельного фрагмента (пикселя) отображаемого на экране.

В шейдерах существует три типа переменных: униформы (uniforms), атрибуты (attributes) и вариации (varyings):

• Униформы (uniforms) - это переменные, что имеют единообразное значение для всех вершин; освещение, туман и карты тени - вот примеры данных, которые будут храниться в униформах. Обращаться к униформам можно как с помощью вершинного шейдера, так и с помощью шейдера фрагментов.
• Атрибуты (attributes) - это переменные, связанные с каждой вершиной - например, положение вершины, нормаль к грани и цвет вершины - это все примеры данных, которые будут хранится в атрибутах. Атрибуты могут быть доступны только внутри вершинного шейдера.
• Вариации (varyings) - это переменные, которые передаются из вершинного шейдера в шейдер фрагмента. Для каждого фрагмента значение каждой вариации будет плавно интерполироваться из значений смежных вершин.

Обратите внимание, что внутри собственно самого шейдера, униформы и атрибуты действуют как константы; изменять их значения можно только передачей различных значений в буферы из JavaScript кода.

Встроенные атрибуты и униформы

По умолчанию WebGLRenderer предоставляет шейдерам множество атрибутов и униформов; определения этих переменных добавляются в код fragmentShader и vertexShader с помощью WebGLProgram при компиляции шейдера; отдельно объявлять их самих не требуется. Подробнее об этих переменных смотрите в описании WebGLProgram.
Некоторые из этих униформ или атрибутов (например связанные с освещением, туманом и т.д.) требуют установки свойств материала, чтобы WebGLRenderer мог скопировать соответствующие значения для
- блок графической обработки - видеокарта')" onmouseout="hide()">GPU - не забудьте установить эти флаги, если хотите в своем собственном шейдере использовать данные функции.
Если не требуется, чтобы WebGLProgram добавляла что-либо к коду шейдера, вместо данного класса можно использовать RawShaderMaterial.

Настраиваемые атрибуты и униформы

Оба типа переменных (и настраиваемые атрибуты, и униформы), должны быть объявлены в GLSL коде шейдера (внутри vertexShader и/или fragmentShader). Настраиваемые униформы должны быть определены также как в свойстве uniforms вашего ShaderMaterial, тогда как любые настраиваемые атрибуты должны быть определены через экземпляры BufferAttribute. Обратите внимание, что вариации должны объявляться только внутри кода шейдера (не в материале).
Для объявления настраиваемого атрибута за общими сведениями обратитесь к описанию BufferGeometry, а подробности API BufferAttribute можно увидеть в описании BufferAttribute.
При создании собственных атрибутов имейте ввиду, что каждый типизированный массив для хранения данных вашего атрибута, должен быть кратным размеру вашего типа данных. Например, если типом атрибута будет THREE.Vector3 и в вашей BufferGeometry имеется 3000 вершин, то величина создаваемого типизированного массива должна иметь длину 3000 * 3 или 9000 (т.е. одно значение на каждый элемент). Для справки ниже приведена таблица размеров для каждого типа данных:
Размеры атрибутов

Тип GLSL GLSL type	Тип JavaScript JavaScript type	Размер Size
float	Number	1
vec2	THREE.Vector2	2
vec3	THREE.Vector3	3
vec3	THREE.Color	3
vec4	THREE.Vector4	4

Обратите внимание, что буферы атрибутов, при изменении их значений, не обновляются автоматически. Для обновления настраиваемых атрибутов, установите флаг needsUpdate как true в BufferAttribute геометрического элемента (для получения дополнительных сведений смотрите описание BufferGeometry).

Для объявления настраиваемой униформы воспользуйтесь свойством uniforms:

uniforms: {
	time: { value: 1.0 },
	resolution: { value: new THREE.Vector2() }
}

Конструктор

ShaderMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Для информации об общих методах смотрите базовый класс Material.

Исходники

Material →  ShaderMaterial →

ShadowMaterial

Данный материал может принимать тени, но в остальном он полностью прозрачен (На русский язык shadow material можно перевести как теневой материал, или материал для тени).

Пример

var planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
planeGeometry.rotateX( - Math.PI / 2 );

var planeMaterial = new THREE.ShadowMaterial();
planeMaterial.opacity = 0.2;

var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.position.y = -200;
plane.receiveShadow = true;
scene.add( plane );

Другие примеры

geometry / spline / editor

Конструктор

ShadowMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовые классы Material и ShaderMaterial.

Методы

Для информации об общих методах смотрите базовые классы Material и ShaderMaterial.

Исходники

Material →

SpriteMaterial

Материал для использования со Sprite.

Пример

var spriteMap = new THREE.TextureLoader().load( 'textures/sprite.png' );

var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );

var sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set(200, 200, 1)

scene.add( sprite );

Другие примеры

WebGL / sprites
misc / ubiquity / test
misc / ubiquity / test2
software / sandbox
svg / sandbox
webgl / materials / cubemap / dynamic

Конструктор

SpriteMaterial( parameters )

Свойства

Для информации об общих свойствах смотрите базовый класс Material.

Методы

Для информации об общих методах смотрите базовый класс Material.

Исходники