Three.js

Геометрические элементы

BoxBufferGeometry

Куб с размером стороны равной 20 и числом сегментов по умолчанию, т.е. 1.

Пример

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

Конструктор

BoxBufferGeometry( width, height, depth, widthSegments, heightSegments, depthSegments )

Свойства

.parameters

geometry.parameters; // outputs an object (параметры объекта) {width:1, height:1,
                     // depth:1, widthSegments:undefined, heightSegments:undefined}
  cube.geometry.parameters;              // as above, т.е. как указано выше
  cube.geometry.parameters.width;        // === 1, т.е. ширина равна 1
  cube.geometry.parameters.widthSegments // === undefined, т.е. неопределено и
                                         // используется значение по умолчанию

Исходники

BoxGeometry

Куб со стороной равной 20, разделенной на 4 сегмента.

Пример

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

Конструктор

BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments )

Свойства

.parameters

geometry.parameters; // outputs an object (параметры объекта) {width:1, height:1,
                     // depth:1, widthSegments:undefined, heightSegments:undefined}
  cube.geometry.parameters;              // as above, т.е. как указано выше
  cube.geometry.parameters.width;        // === 1, т.е. ширина равна 1
  cube.geometry.parameters.widthSegments // === undefined, т.е. неопределено и
                                         // используется значение по умолчанию

Исходники

CircleBufferGeometry

Круг с радиусом 20 и 32 сегментами, остальные параметры по умолчанию.
Обратите внимание на более светлую границу между сегментами, справа.
Так обозначен thetaStart — начальный угол.

Пример

var geometry = new THREE.CircleBufferGeometry( 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );

Конструктор

CircleBufferGeometry( radius, segments, thetaStart, thetaLength )

Исходники

CircleGeometry

Круг с радиусом 20 и 32 сегментами, остальные параметры по умолчанию.
Обратите внимание на более светлую границу между сегментами, справа.
Так обозначен thetaStart — начальный угол.

Пример

var geometry = new THREE.CircleGeometry( 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );

Конструктор

CircleGeometry( radius, segments, thetaStart, thetaLength )

Исходники

ConeBufferGeometry

Конус

Пример

var geometry = new THREE.ConeBufferGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cone = new THREE.Mesh( geometry, material );
scene.add( cone );

Конструктор

ConeBufferGeometry( radius, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength )

Исходники

ConeGeometry

Конус

Пример

var geometry = new THREE.ConeGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cone = new THREE.Mesh( geometry, material );
scene.add( cone );

Конструктор

ConeGeometry( radius, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength )

Исходники

CylinderBufferGeometry

Цилиндр с шестью гранями и закрытыми основаниями

Пример

var geometry = new THREE.CylinderBufferGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

Конструктор

CylinderBufferGeometry( radiusTop, radiusBottom, height, radiusSegments,
                        heightSegments, openEnded, thetaStart, thetaLength )

Исходники

CylinderGeometry

Цилиндр с открытыми основаниями с 16 сегментами-гранями по окружности и четырьмя сегментами по высоте

Пример

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

Конструктор

CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments,
                  heightSegments, openEnded, thetaStart, thetaLength )

Исходники

DodecahedronBufferGeometry

Додекаэдр

Конструктор

DodecahedronBufferGeometry( radius, detail )

При установке значения аргумента detail равным 3,
получается вот такой «додекаэдр».

Свойства

.parameters

Исходники

DodecahedronGeometry

Додекаэдр

Конструктор

DodecahedronGeometry( radius, detail )

При установке значения аргумента detail равным 3,
получается вот такой «додекаэдр».

Свойства

.parameters

Исходники

EdgesGeometry

Пример

var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var edges = new THREE.EdgesGeometry( geometry );
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );

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

helpers

Конструктор

EdgesGeometry( geometry, thresholdAngle )

Исходники

ExtrudeGeometry

ExtrudeGeometry

Пример

var length = 12, width = 8;

var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

var extrudeSettings = {
  steps: 2,
  amount: 16,
  bevelEnabled: true,
  bevelThickness: 1,
  bevelSize: 1,
  bevelSegments: 1
};

var geometry = new THREE.ExtrudeGeometry( shape, data );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

Конструктор

ExtrudeGeometry( shapes, options )

Свойства

Методы

.addShapeList( shapes, options )

addShape( 
shape - форма')" onmouseout="hide()">shape, options )

Исходники

ExtrudeBufferGeometry

ExtrudeGeometry

Пример

var length = 12, width = 8;

var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

var extrudeSettings = {
  steps: 2,
  amount: 16,
  bevelEnabled: true,
  bevelThickness: 1,
  bevelSize: 1,
  bevelSegments: 1
};

var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

Конструктор

ExtrudeBufferGeometry( shapes, options )

Свойства

Методы

.addShapeList( shapes, options )

addShape( 
shape - форма')" onmouseout="hide()">shape, options )

Исходники

IcosahedronBufferGeometry

Икосаэдр

Конструктор

IcosahedronBufferGeometry( radius, detail )

"Икосаэдр" со значением detail равном 3

Свойства

.parameters

Исходники

IcosahedronGeometry

Икосаэдр

Конструктор

IcosahedronGeometry( radius, detail )

"Икосаэдр" со значением detail равном 3

Свойства

.parameters

Исходники

LatheBufferGeometry

Lathe

Пример

var points = [];
for ( var i = 0; i < 10; i ++ ) {
	points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
var geometry = new THREE.LatheBufferGeometry( points );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );

Конструктор

LatheBufferGeometry( points, segments, 
обозначенного греческой
буквой фи - φ')" onmouseout="hide()">phiStart, phiLength )

Исходники

LatheGeometry

Lathe

Пример

var points = [];
for ( var i = 0; i < 10; i ++ ) {
	points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
var geometry = new THREE.LatheGeometry( points );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );

Конструктор

LatheGeometry( points, segments, 
обозначенного греческой
буквой фи - φ')" onmouseout="hide()">phiStart, phiLength )

Исходники

OctahedronBufferGeometry

Октаэдр

Конструктор

OctahedronBufferGeometry( radius, detail )

"Октаэдр" со значением detail равном 3

Свойства

.parameters

Исходники

OctahedronGeometry

Октаэдр

Конструктор

OctahedronGeometry( radius, detail )

"Октаэдр" со значением detail равном 3

Свойства

.parameters

Исходники

ParametricBufferGeometry

Parametric

Пример

var geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 25, 25 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

Конструктор

ParametricBufferGeometry( func, slices, stacks )

Исходники

ParametricGeometry

Parametric

Пример

var geometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 25, 25 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var klein = new THREE.Mesh( geometry, material );
scene.add( klein );

Конструктор

ParametricGeometry( func, slices, stacks )

Исходники

PlaneBufferGeometry

PlaneGeometry

Пример

var geometry = new THREE.PlaneBufferGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );

Конструктор

PlaneBufferGeometry( width, height, widthSegments, heightSegments )

Исходники

PlaneGeometry

PlaneGeometry

Пример

var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );

Конструктор

PlaneBufferGeometry( width, height, widthSegments, heightSegments )

Исходники

PolyhedronBufferGeometry

Пример

var verticesOfCube = [
  -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
  -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];

var indicesOfFaces = [
  2,1,0,    0,3,2,
  0,4,7,    7,3,0,
  0,1,5,    5,4,0,
  1,2,6,    6,5,1,
  2,3,7,    7,6,2,
  4,5,6,    6,7,4
];

var geometry = new THREE.PolyhedronBufferGeometry( verticesOfCube, indicesOfFaces, 6, 2 );

Конструктор

PolyhedronBufferGeometry( vertices, indices, radius, detail )

Свойства

.parameters

Исходники

PolyhedronGeometry

Пример

var verticesOfCube = [
  -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
  -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];

var indicesOfFaces = [
  2,1,0,    0,3,2,
  0,4,7,    7,3,0,
  0,1,5,    5,4,0,
  1,2,6,    6,5,1,
  2,3,7,    7,6,2,
  4,5,6,    6,7,4
];

var geometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 6, 2 );

Конструктор

PolyhedronGeometry( vertices, indices, radius, detail )

Свойства

.parameters

Исходники

RingBufferGeometry

Кольцо

Пример

var geometry = new THREE.RingBufferGeometry( 1, 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Конструктор

RingBufferGeometry( innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength )

Исходники

RingGeometry

Кольцо

Пример

var geometry = new THREE.RingGeometry( 1, 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Конструктор

RingGeometry( innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength )

Исходники

ShapeBufferGeometry

Геометрическая форма с числом сегментов по умолчанию, т.е. 12.

Пример

var x = 0, y = 0;

var heartShape = new THREE.Shape();

heartShape.moveTo( x + 5, y + 5 );
heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

var geometry = new THREE.ShapeBufferGeometry( heartShape );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

Конструктор

ShapeBufferGeometry( shapes, curveSegments )

Исходники

ShapeGeometry

Геометрическая форма с числом сегментов по умолчанию, т.е. 12.

Пример

var x = 0, y = 0;

var heartShape = new THREE.Shape();

heartShape.moveTo( x + 5, y + 5 );
heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

var geometry = new THREE.ShapeGeometry( heartShape );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

Конструктор

ShapeGeometry( shapes, curveSegments )

Исходники

SphereBufferGeometry

Сфера

Пример

var geometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

Конструктор

SphereBufferGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )

Исходники

SphereGeometry (геометрия сферы)

Сфера

Пример

var geometry = new THREE.SphereGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

Конструктор

SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )

Исходники

TetrahedronBufferGeometry

Tetrahedron

Конструктор

TetrahedronBufferGeometry( radius, detail )

Свойства

.parameters

Исходники

TetrahedronGeometry

Tetrahedron

Конструктор

TetrahedronGeometry( radius, detail )

Свойства

.parameters

Исходники

TextBufferGeometry

Text

Пример

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

  var geometry = new THREE.TextBufferGeometry( 'Hello three.js!', {
    font: font,
    size: 80,
    height: 5,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelSegments: 5
  } );
} );

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

geometry / text

Конструктор

TextBufferGeometry( text, .parameters )

Доступные шрифты

Исходники

TextGeometry

Text

Пример

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

  var geometry = new THREE.TextGeometry( 'Hello three.js!', {
    font: font,
    size: 80,
    height: 5,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelSegments: 5
  } );
} );

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

geometry / text

Конструктор

TextGeometry( text, .parameters )

Доступные шрифты

Исходники

TorusBufferGeometry

Тор

Пример

var geometry = new THREE.TorusBufferGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
scene.add( torus );

Конструктор

TorusBufferGeometry( radius, tube, radialSegments, tubularSegments, arc )

Исходники

TorusGeometry

Тор

Пример

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
scene.add( torus );

Конструктор

TorusGeometry( radius, tube, radialSegments, tubularSegments, arc )

Исходники

TorusKnotBufferGeometry

Тор с узлом

Пример

var geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torusKnot = new THREE.Mesh( geometry, material );
scene.add( torusKnot );

Конструктор

TorusKnotBufferGeometry( radius, tube, tubularSegments, radialSegments, p, q )

Исходники

TorusKnotGeometry

Тор с узлом

Пример

var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torusKnot = new THREE.Mesh( geometry, material );
scene.add( torusKnot );

Конструктор

TorusKnotGeometry( radius, tube, tubularSegments, radialSegments, p, q )

p=1, q=1

p=2, q=1

p=3, q=1

p=4, q=1

p=1, q=1

p=1, q=2

p=1, q=3

p=1, q=4

Исходники

TubeBufferGeometry

Труба

Пример

function CustomSinCurve( scale ) {
  THREE.Curve.call( this );
  this.scale = ( scale === undefined ) ? 1 : scale;
}

CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
CustomSinCurve.prototype.constructor = CustomSinCurve;
CustomSinCurve.prototype.getPoint = function ( t ) {
  var tx = t * 3 - 1.5;
  var ty = Math.sin( 2 * Math.PI * t );
  var tz = 0;
  return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
};

var path = new CustomSinCurve( 10 );
var geometry = new THREE.TubeBufferGeometry( path, 20, 2, 8, false );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Конструктор

TubeBufferGeometry( 
path - путь, контур')" onmouseout="hide()">path, tubularSegments, radius, radiusSegments, closed )

Свойства

.parameters

.tangents

.normals

.binormals

Исходники

TubeGeometry

Труба

Пример

function CustomSinCurve( scale ) {
  THREE.Curve.call( this );
  this.scale = ( scale === undefined ) ? 1 : scale;
}

CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
CustomSinCurve.prototype.constructor = CustomSinCurve;
CustomSinCurve.prototype.getPoint = function ( t ) {
  var tx = t * 3 - 1.5;
  var ty = Math.sin( 2 * Math.PI * t );
  var tz = 0;
  return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
};

var path = new CustomSinCurve( 10 );
var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Конструктор

TubeGeometry( 
path - путь, контур')" onmouseout="hide()">path, tubularSegments, radius, radiusSegments, closed )

Свойства

.parameters

.tangents

.normals

.binormals

Исходники

WireframeGeometry

Пример

var geometry = new THREE.SphereBufferGeometry( 100, 100, 100 );

var wireframe = new THREE.WireframeGeometry( geometry );

var line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
line.material.opacity = 0.25;
line.material.transparent = true;

scene.add( line );

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

helpers

Конструктор

WireframeGeometry( geometry )

Исходники