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}
   // параметры объекта {width: 1, height: 1, depth: 1, widthSegments: undefined, heightSegments: undefined}
cube.geometry.parameters; // как указано выше
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
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

Пример

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

Пример

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

Пример

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([page:Array shapes], [page:Object options])

Свойства

Методы

[method:null addShapeList]([page:Array shapes], [page:Object options] )

Source

IcosahedronBufferGeometry

Конструктор

IcosahedronBufferGeometry([page:Float radius], [page:Integer detail])

Свойства

[property:Object parameters]

Source

IcosahedronGeometry

Конструктор

IcosahedronGeometry([page:Float radius], [page:Integer detail])

Свойства

[property:Object parameters]

Source

LatheBufferGeometry

Пример

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([page:Array points], [page:Integer segments], [page:Float phiStart], [page:Float phiLength])

Source

LatheGeometry

Пример

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([page:Array points], [page:Integer segments], [page:Float phiStart], [page:Float phiLength])

Source

OctahedronBufferGeometry

Конструктор

OctahedronBufferGeometry([page:Float radius], [page:Integer detail])

Свойства

[property:Object parameters]

Исходники

OctahedronGeometry

Конструктор

OctahedronGeometry([page:Float radius], [page:Integer detail])

Свойства

[property:Object parameters]

Исходники

ParametricBufferGeometry

Пример

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([page:Function func], [page:Integer slices], [page:Integer stacks])

Исходники

ParametricGeometry

Пример

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

Конструктор

ParametricGeometry([page:Function func], [page:Integer slices], [page:Integer stacks])

Исходники

PlaneBufferGeometry

Пример

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

Пример

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, faces, radius, detail )

Свойства

[property:Object 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([page:Array vertices], [page:Array faces], [page:Float radius], [page:Integer detail])

Свойства

[property:Object 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 length = 16, width = 12;

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 geometry = new THREE.ShapeGeometry( shape );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

Конструктор

ShapeBufferGeometry([page:Array shapes], [page:Object options])

Методы

.addShapeList([page:Array shapes], [page:Object options]) [page:this]

[method:null addShape]([page:Shape shape], [page:Object options])

Исходники

ShapeGeometry

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

Пример

var length = 16, width = 12;

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 geometry = new THREE.ShapeGeometry( shape );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

Конструктор

ShapeGeometry([page:Array shapes], [page:Object options])

Методы

.addShapeList([page:Array shapes], [page:Object options]) [page:this]

[method:null addShape]([page:Shape shape], [page:Object options])

Исходники

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

Конструктор

TetrahedronBufferGeometry(radius, detail)

radius — "Радиус" тетраэдра - скорее это длина ребра тетраэдра. По умолчанию равен 1.
detail — По умолчанию равен 0. Установка значения для этого параметра больше нуля добавит вершин и это будет уже не тетраэдр.
Например, вот detail равен 5.

Свойства

.parameters

Исходники

TetrahedronGeometry

Конструктор

TetrahedronGeometry([page:Float radius], [page:Integer detail])

Свойства

[property:Object parameters]

Исходники

TextBufferGeometry

Examples

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
	} );
} );

Конструктор

TextBufferGeometry([page:String text], [page:Object parameters])

Available Fonts

Source

TextGeometry

Пример

Конструктор

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, tubularSegments, radialSegments, 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, tubularSegments, radialSegments, 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)

• radius — Default is 100.
• tube — Diameter of the tube. Default is 40.
• tubularSegments — Default is 64.
• radialSegments — Default is 8.
• p — This value determines, how many times the geometry winds around its axis of rotational symmetry. Default is 2.
• q — This value determines, how many times the geometry winds around a circle in the interior of the torus. Default is 3.

Исходники

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 — данное значение определяет, сколько оборотов делает труба вокруг центральной оси кольца. This value determines, how many times the geometry winds around its axis of rotational symmetry. Значение по умолчанию равно 2.

p=1, q=1

p=2, q=1

p=3, q=1

p=4, q=1

q — данное значение определяет, сколько оборотов сделает труба вдоль окружности кольца. This value determines, how many times the geometry winds around a circle in the interior of the torus. Значение по умолчанию равно 3.

p=1, q=1

p=1, q=2

p=1, q=3

p=1, q=4

Исходники

TubeBufferGeometry

Пример

var CustomSinCurve = THREE.Curve.create(
	function ( scale ) { //custom curve constructor
		this.scale = ( scale === undefined ) ? 1 : scale;
	},
	function ( t ) { //getPoint: t is between 0-1
		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, tubularSegments, radius, radiusSegments, closed )

Свойства

[property:Object parameters]

[property:Array tangents]

[property:Array normals]

[property:Array binormals]

Исходники

TubeGeometry

Пример

var CustomSinCurve = THREE.Curve.create(
	function ( scale ) { //custom curve constructor
		this.scale = ( scale === undefined ) ? 1 : scale;
	},
	function ( t ) { //getPoint: t is between 0-1
		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, tubularSegments, radius, radiusSegments, closed )

Свойства

[property:Object parameters]

[property:Array tangents]

[property:Array normals]

[property:Array 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 )

Исходники