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 )

Исключением является свойство color, значение которого можно передать как шестнадцатиричную строку и по умолчанию равно 0xffffff (белый цвет). Метод Color.set( color ) вызывается внутренне.

Свойства

Для информации об общих свойствах смотрите базовый класс 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 )

Исключением является свойство color, значение которого можно передать как шестнадцатиричную строку и по умолчанию равно 0xffffff (белый цвет). Метод Color.set( color ) вызывается внутренне.

Свойства

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

Методы

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

Исходники

Material

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

Конструктор

Material()

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

Свойства

Методы

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

Исходники

Material →

MeshBasicMaterial

Материал для рисования геометрических элементов в A material for drawing geometries in a simple shaded (flat or wireframe) way.
На этот материал не влияет освещение. This material is not affected by lights. A material for drawing geometries in a simple shaded (flat or wireframe) way.
По умолчанию будет отображаться в виде плоских многоугольников. Чтобы нарисовать сетку в виде каркаса, просто установите свойство wireframe как true.

Конструктор

MeshBasicMaterial( parameters )

Исключением является свойство color, значение которого можно передать как шестнадцатиричную строку и по умолчанию равно 0xffffff (белый цвет). Метод Color.set( color ) вызывается внутренне.

Свойства

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

Методы

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

Исходники

Material →

MeshDepthMaterial

Материал для рисования геометрических элементов фигуры в глубину. Глубина зависит от ближней и дальней плоскостей отсечения камеры. A material for drawing geometry by depth. Depth is based off of the camera near and far plane. White is nearest, black is farthest.

Конструктор

MeshDepthMaterial( parameters )

Свойства

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

Методы

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

Исходники

Material →

MeshLambertMaterial

Материал для матовых поверхностей, без A material for non-shiny surfaces, without specular highlights.
The material uses a non-physically based Lambertian model for calculating reflectance. This can simulate some surfaces (such as untreated wood or stone) well, but cannot simulate shiny surfaces with specular highlights (such as varnished wood).
Shading is calculated using a Gouraud shading model. This calculates shading per vertex (i.e. in the vertex shader) and interpolates the results over the polygon's faces.
Due to the simplicity of the reflectance and illumination models, performance will be greater when using this material over the MeshPhongMaterial, MeshStandardMaterial or MeshPhysicalMaterial, at the cost of some graphical accuracy.

Конструктор

MeshLambertMaterial( parameters )

Исключением является свойство color, значение которого можно передать как шестнадцатиричную строку и по умолчанию равно 0xffffff (белый цвет). Метод Color.set( color ) вызывается внутренне.

Свойства

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

Методы

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

Исходники

Material →

MeshNormalMaterial

Материал, который сопоставляет векторы нормалей в RGB цвета. A material that maps the normal vectors to RGB colors.

Конструктор

MeshNormalMaterial( parameters )

Свойства

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

Методы

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

Исходники

Material →

MeshPhongMaterial

A material for shiny surfaces, evaluated per pixel.

Конструктор

MeshPhongMaterial( [page:Object parameters] )

Свойства

[property:Color color]

[property:Color specular]

[property:Float shininess]

[property:Texture map]

[property:Texture lightMap]

[property:Float lightMapIntensity]

[property:Texture aoMap]

[property:Float aoMapIntensity]

[property:Color emissive]

[property:Texture emissiveMap]

[property:Float emissiveIntensity]

[property:Texture bumpMap]

[property:Float bumpScale]

[property:Texture normalMap]

[property:Vector2 normalScale]

[property:Texture displacementMap]

[property:Float displacementScale]

[property:Float displacementBias]

[property:Texture specularMap]

[property:Texture alphaMap]

[property:TextureCube envMap]

[property:Integer combine]

[property:Float reflectivity]

[property:Float refractionRatio]

[property:Boolean fog]

[property:Integer shading]

[property:Boolean wireframe]

[property:Float wireframeLinewidth]

[property:String wireframeLinecap]

[property:String wireframeLinejoin]

[property:Integer vertexColors]

[property:Boolean skinning]

[property:Boolean morphTargets]

[property:boolean morphNormals]

Defines whether the material uses morphNormals. Set as true to pass morphNormal attributes from the [page:Geometry] to the shader. Default is *false*.

Методы

Исходники

Material →  MeshStandardMaterial →

MeshPhysicalMaterial

Расширение MeshStandardMaterial, позволяющее увеличить регулировку способности к отражению. reflectivity.
Обратите внимание, что при использовании этого материала, для достижения наилучших результатов, всегда следует указывать карту окружения. Note that for best results you should always specify an environment map when using this material.

Примеры

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

Конструктор

MeshPhysicalMaterial( parameters )

Исключением является свойство color, значение которого можно передать как шестнадцатиричную строку и по умолчанию равно 0xffffff (белый цвет). Метод Color.set( color ) вызывается внутренне.

Свойства

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

Методы

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

Исходники

Material →

MeshStandardMaterial

Стандартный, физически обоснованный материал, using Metallic-Roughness workflow.
Physically based rendering (PBR) has recently become the standard in many 3D applications, such as Unity, Unreal and 3D Studio Max. This approach differs from older approaches in that instead of using approximations for the way in which light interacts with a surface, a physically correct model is used. The idea is that, instead of tweaking materials to look good under specific lighting, a material can be created that will react 'correctly' under all lighting scenarios. In practice this gives a more accurate and realistic looking result than the MeshLambertMaterial or MeshPhongMaterial, at the cost of being somewhat more computationally expensive. Shading is calculated in the same way as for the MeshPhongMaterial, using a Phong shading model. This calculates shading per pixel (i.e. in the fragment shader, AKA pixel shader) which gives more accurate results than the Gouraud model used by MeshLambertMaterial, at the cost of some performance. Note that for best results you should always specify an environment map when using this material. For a non-technical introduction to the concept of PBR and how to set up a PBR material, check out these articles by the people at marmoset:

• Basic Theory of Physically Based Rendering
• Physically Based Rendering and You Can Too

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

Конструктор

MeshStandardMaterial( parameters )

Исключением является свойство color, значение которого можно передать как шестнадцатиричную строку и по умолчанию равно 0xffffff (белый цвет). Метод Color.set( color ) вызывается внутренне.

Свойства

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

Методы

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

Исходники

Material →  MeshPhongMaterial →

MeshToonMaterial

Расширение MeshPhongMaterial с with toon shading.

Пример

webgl / materials / variations / toon

Конструктор

MeshToonMaterial( parameters )

Исключением является свойство color, значение которого можно передать как шестнадцатиричную строку и по умолчанию равно 0xffffff (белый цвет). Метод Color.set( color ) вызывается внутренне.

Свойства

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

.defines

Объект в виде:

{ 'TOON': '' };

Он используется WebGLRenderer'ом для выбора шейдеров.

Методы

Для информации об общих методах смотрите базовые классы 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 )

Исключением является свойство color, значение которого можно передать как шестнадцатиричную строку и по умолчанию равно 0xffffff (белый цвет). Метод Color.set( color ) вызывается внутренне.

Свойства

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

Методы

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

Исходники

ShaderMaterial →

RawShaderMaterial

Данный класс работает также как класс ShaderMaterial, за исключением того, что определения встроенных атрибутов и uniform не добавляются к коду шейдера GLSL автоматически. except that definitions of built-in uniforms and attributes are not automatically prepended to the GLSL shader code.

Пример

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 для запуска на GPU. Можно использовать заказной шейдер, если требуется:

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

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

• A *ShaderMaterial* will only be rendered properly by [page:WebGLRenderer], since the GLSL code in the *vertexShader* and *fragmentShader* properties must be compiled and run on the GPU using WebGL.
• Начиная с версии THREE r72, больше не поддерживается прямое назначение атрибутов в ShaderMaterial. A [page:BufferGeometry] instance (instead of a [page:Geometry] instance) must be used instead, using [page:BufferAttribute] instances to define custom attributes.
• Начиная с версии THREE r77, экземпляры WebGLRenderTarget или WebGLRenderTargetCube не должны больше использоваться как uniforms. Вместо этого нужно воспользоваться их свойством texture.
• Встроенные атрибуты и uniforms передаются шейдерам вместе с кодом. Если не требуется, чтобы WebGLProgram добавляла что-либо к коду шейдера, вместо данного класса можно использовать RawShaderMaterial.

Пример

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) - это переменные, что имеют однообразное значение для всех вершин; освещение, туман и карты тени - вот примеры данных, которые будут храниться в униформах. Uniforms can be accessed by both the vertex shader and the fragment shader.
• Атрибуты (attributes) - это переменные, связанные с каждой вершиной - например, положение вершины, нормаль к грани и цвет вершины - это все примеры данных, которые будут хранится в атрибутах. Атрибуты могут быть доступны только внутри вершинного шейдера.
• Вариации (varyings) - это переменные, которые передаются из вершинного шейдера в шейдер фрагмента. Для каждого фрагмента значение каждой вариации будет плавно интерполироваться из значений смежных вершин.

Обратите внимание, что внутри собственно самого шейдера, униформы и атрибуты действуют как константы; можно только изменять их значения передачей различных значений в буферы из JavaScript кода. Note that within the shader itself, uniforms and attributes act like constants; you can only modify their values by passing different values to the buffers from your JavaScript code.

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

По умолчанию WebGLRenderer предоставляет шейдерам множество атрибутов и униформов; определения этих переменных добавляются в код fragmentShader и vertexShader с помощью WebGLProgram при компиляции шейдера; отдельно объявлять их самих не требуется. Подробнее об этих переменных смотрите в описании WebGLProgram.

Некоторые из этих униформ или атрибутов (например связанные с освещением, туманом и т.д.) требуют установки свойств материала, чтобы WebGLRenderer мог скопировать соответствующие значения для GPU - не забудьте установить эти флаги, если хотите в своем собственном шейдере использовать данные функции.

Если не требуется, чтобы WebGLProgram добавляла что-либо к коду шейдера, вместо данного класса можно использовать RawShaderMaterial.

Настраиваемые атрибуты и униформы Custom attributes and uniforms

Оба типа переменных (и настраиваемые атрибуты, и униформы), должны быть объявлены в GLSL коде шейдера (внутри vertexShader и/или fragmentShader). Both custom attributes and uniforms must be declared in your GLSL shader code (within *vertexShader* and/or *fragmentShader*). Custom uniforms must be defined in both the *uniforms* property of your *ShaderMaterial*, whereas any custom attributes must be defined via [page:BufferAttribute] instances. Note that *varying*s only need to be declared within the shader code (not within the material).

To declare a custom attribute, please reference the [page:BufferGeometry] page for an overview, and the [page:BufferAttribute] page for a detailed look at the *BufferAttribute* API.

При создании собственных атрибутов имейте ввиду, что каждый типизированный массив, для хранения данных вашего атрибута, должен быть кратным размеру вашего типа данных. Например, если типом атрибута будет THREE.Vector3 и в вашей BufferGeometry имеется 3000 вершин, то величина создаваемого типизированного массива должна иметь длину 3000 * 3 или 9000 (т.е. одно значение на каждый элемент). When creating your attributes, each typed array that you create to hold your attribute's data must be a multiple of your data type's size. For example, if your attribute is a [page:Vector3 THREE.Vector3] type, and you have 3000 vertices in your [page:BufferGeometry], your typed array value must be created with a length of 3000 * 3, or 9000 (one value per-component). Для справки ниже приведена таблица размеров для каждого типа данных:
Размеры атрибутов

Тип 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

Note that attribute buffers are not refreshed automatically when their values change. To update custom attributes, set the *needsUpdate* flag to true on the [page:BufferAttribute] of the geometry (see [page:BufferGeometry] for further details).

To declare a custom [page:Uniform], use the *uniforms* property:

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 )

Исключением является свойство color, значение которого можно передать как шестнадцатиричную строку и по умолчанию равно 0xffffff (белый цвет). Метод Color.set( color ) вызывается внутренне.

Свойства

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

Методы

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

Исходники