Three.js - Примеры

Примеры

Контролы

      OrbitControls

Пример

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();

var  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

var controls = new THREE.OrbitControls( camera );

// controls.update() must be called after any manual changes to the camera's transform
// после любых ручных изменений состояния камеры должен быть вызван controls.update()
camera.position.set( 0, 20, 100 );
controls.update();

function animate() {

  requestAnimationFrame( animate );

  // required if controls.enableDamping or controls.autoRotate are set to true
  // если controls.enableDamping или controls.autoRotate установлен как true, необходимо
  controls.update();

  renderer.render( scene, camera );

}

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

misc / controls / orbit

Конструктор

OrbitControls( 
object - объект')" onmouseout="hide()">object, domElement )

Свойства

.autoRotate

.autoRotateSpeed

.dampingFactor

.domElement

.enabled

.enableDamping

(в смысле - отслеживать нажатия
клавиш клавиатуры)')" onmouseout="hide()">.enableKeys

.enablePan

.enableRotate

.enableZoom

.keyPanSpeed

.keys

controls.keys = {
  LEFT: 37, // left arrow (стрелка влево)
  UP: 38, // up arrow (стрелка вверх)
  RIGHT: 39, // right arrow (стрелка вправо)
  BOTTOM: 40 // down arrow (стрелка вниз)
}

.maxAzimuthAngle

.maxDistance

.maxPolarAngle

.maxZoom

.minAzimuthAngle

.minDistance

.minPolarAngle

.minZoom

.mouseButtons

controls.mouseButtons = {
  ORBIT: THREE.MOUSE.LEFT,
  ZOOM: THREE.MOUSE.MIDDLE,
  PAN: THREE.MOUSE.RIGHT
}

object - объект')" onmouseout="hide()">.object

.panningMode

.panSpeed

position 0 - позиция 0')" onmouseout="hide()">.position0

.rotateSpeed

target 0 - цель 0')" onmouseout="hide()">.target0

target - цель')" onmouseout="hide()">.target

.zoom0

.zoomSpeed

Методы

.dispose( )

.getAzimuthalAngle( )

.getPolarAngle( )

.reset( )

.saveState( )

.update( )

Исходники

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

      ConvexBufferGeometry

Пример

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

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

geometry / convex

Конструктор

ConvexBufferGeometry( points )

Исходники

      ConvexGeometry

Пример

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

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

geometry / convex

Конструктор

ConvexGeometry( points )

Исходники

      DecalGeometry

Пример

var geometry =  new THREE.DecalGeometry( mesh, position, orientation, size );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

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

decals

Конструктор

DecalGeometry( 
mesh - сетка')" onmouseout="hide()">mesh, 
position - позиция')" onmouseout="hide()">position, 
orientation - ориентация, направление')" onmouseout="hide()">orientation, 
size - размер')" onmouseout="hide()">size )

Исходники

Загрузчики

      BabylonLoader

Пример

// instantiate a loader (создаем экземпляр загрузчика)
var loader = new THREE.BabylonLoader();

// load a Babylon resource (загружаем Babylon ресурс)
loader.load(
  // resource URL (URL-адрес ресурса)
  'models/babylon/skull.babylon',
  // Function when resource is loaded (функция при загрузке ресурса)
  function ( object ) {
    scene.add( object );
  },
  // Function called when download progresses
  // функция, вызываемая в процессе загрузки
  function ( xhr ) {
    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
  },
  // Function called when download errors
  // функция, вызываемая при ошибках загрузки
  function ( xhr ) {
    console.log( 'An error happened' );
  }
);

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

webgl_loader_babylon

Конструктор

BabylonLoader( 
manager - менеджер, управляющий')" onmouseout="hide()">manager )

Свойства

Методы

.load( 
- единообразный локатор (определитель
местонахождения) ресурса.')" onmouseout="hide()">url, onLoad, onProgress, onError )

parse - разбор, структурный анализ')" onmouseout="hide()">.parse( 
текстовый формат описания объекта, основанный на JavaScript')" onmouseout="hide()">json )

Исходники

GLTFLoader

Расширения

Пример

// Instantiate a loader (создание экземпляра загрузчика)
var loader = new THREE.GLTFLoader();

// Optional: Provide a DRACOLoader instance to decode compressed mesh data
// опционально: предоставление экземпляра DRACOLoader для декодирования сжатых данных сетки
THREE.DRACOLoader.setDecoderPath( '/examples/js/libs/draco' );
loader.setDRACOLoader( new THREE.DRACOLoader() );

// Load a glTF resource (загрузка ресурсов в формате glTF)
loader.load(
  // resource URL (URL-адрес ресурса)
  'models/gltf/duck/duck.gltf',
  // called when the resource is loaded (вызывается по завершении загрузки)
  function ( gltf ) {

    scene.add( gltf.scene );

    gltf.animations; // Array (массив) <THREE.AnimationClip>
    gltf.scene; // THREE.Scene
    gltf.scenes; // Array (массив) <THREE.Scene>
    gltf.cameras; // Array (массив) <THREE.Camera>
    gltf.asset; // Object (объект)

  },
  // called when loading is in progresses (вызывается во время загрузки)
  function ( xhr ) {

    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

  },
  // called when loading has errors (вызывается при ошибках в загрузке)
  function ( error ) {

    console.log( 'An error happened' );
  }
);

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

webgl / loader / gltf

Совместимость с браузером

Конструктор

GLTFLoader( 
manager - менеджер, управляющий')" onmouseout="hide()">manager )

Свойства

Методы

.load( 
- единообразный локатор (определитель
местонахождения) ресурса.')" onmouseout="hide()">url, onLoad, onProgress, onError )

.setPath( path )

.setCrossOrigin( value )

.setDRACOLoader( dracoLoader : DRACOLoader )

.parse( data, path, onLoad, onError )

Исходники

MTLLoader

Конструктор

MTLLoader( 
manager - менеджер, управляющий')" onmouseout="hide()">loadingManager )

Свойства

Методы

.load( 
- единообразный локатор (определитель
местонахождения) ресурса.')" onmouseout="hide()">url, onLoad, onProgress, onError )

.setPath( path )

.setTexturePath( path )

.setCrossOrigin( useCrossOrigin )

.setMaterialOptions( options )

.parse( text )

Исходники

OBJLoader

Пример

// instantiate a loader (создание экземпляра загрузчика)
var loader = new THREE.OBJLoader();

// load a resource (загрузка ресурса)
loader.load(
  // resource URL (адрес ресурса)
  'models/monster.obj',
  // called when resource is loaded (вызывается по завершении загрузки)
  function ( object ) {
     scene.add( object );
  },

  // called when loading is in progresses (вызывается во время загрузки)
  function ( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

  },

  // called when loading has errors (вызывается при ошибках в загрузке)
  function ( error ) {
     console.log( 'An error happened' );
  }
);

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

webgl / loader / obj

Конструктор

OBJLoader( 
manager - менеджер, управляющий')" onmouseout="hide()">manager )

Свойства

Методы

.load( 
- единообразный локатор (определитель
местонахождения) ресурса')" onmouseout="hide()">url, onLoad, onProgress, onError )

parse - разбор, синтаксический анализ')" onmouseout="hide()">.parse( text )

Исходники

OBJLoader2

Пример

// instantiate the loader (создание экземпляра загрузчика)
var loader = new THREE.OBJLoader2();

// function called on successful load (вызывается по успешному завершению загрузки)
var callbackOnLoad = function ( event ) {
  scene.add( event.detail.loaderRootNode );
};

// load a resource from provided URL synchronously
// синхронная загрузка ресурса из предоставленного URL-адреса
loader.load( 'obj/female02/female02.obj', callbackOnLoad, null, null, null, false );

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

webgl / loader / obj2 - простой пример
Example for multiple use-cases (parse, load and run with instructions (sync and async)
webgl / loader / obj2 / options
Advanced example using LoaderSupport.LoaderWorkerDirector for orchestration of multiple workers.
webgl / loader / obj2 / run / director

Конструктор

OBJLoader2( 
manager - менеджер, управляющий')" onmouseout="hide()">manager, 
logger - регистратор, логгер, самописец')" onmouseout="hide()">logger )

Свойства

Методы

.parse ( {content : arraybuffer|content : String] ) : Object3D

.parseAsync ( content : arraybuffer, onLoad : Function ) : Object3D

.load( 
- единообразный локатор (определитель
местонахождения) ресурса')" onmouseout="hide()">url, onLoad, onProgress, onError, onMeshAlter, useAsync  )

.run ( params : LoaderSupport.PrepData, workerSupportExternal : LoaderSupport.WorkerSupport ) : null

.setLogging( enabled, debug )

.setModelName( modelName )

.setPath( path )

.setStreamMeshesTo ( streamMeshesTo : Object3D ) : null

.setMaterials ( Array of materials : Material ) : null

.setUseIndices ( useIndices ) : null

.setDisregardNormals( disregardNormals )

.setMaterialPerSmoothingGroup( materialPerSmoothingGroup )

.onProgress( type, text, numericalValue )

.loadMtl( 
- единообразный локатор (определитель
местонахождения) ресурса')" onmouseout="hide()">url, content, 
вызова (по окончании) загрузки')" onmouseout="hide()">callbackOnLoad, crossOrigin, materialOptions )

Исходники

LoaderSupport

Подклассы

LoaderSupport.Builder
LoaderSupport.LoadedMeshUserOverride
LoaderSupport.WorkerSupport
LoaderSupport.WorkerRunnerRefImpl
LoaderSupport.WorkerDirector
LoaderSupport.ResourceDescriptor
LoaderSupport.PrepData
LoaderSupport.Callbacks
LoaderSupport.Validator

Пример

Builder

Конструктор

Builder( )

Методы

.setLogging( enabled, debug )

.init( )

.setMaterials( 
array of materials - массив материалов')" onmouseout="hide()">Array of materials )

.processPayload( payload )

.buildMeshes( meshPayload )

.updateMaterials( materialPayload )

.getMaterialsJSON( )

.getMaterials( )

LoadedMeshUserOverride

Конструктор

LoadedMeshUserOverride( disregardMesh, bufferGeometry )

Методы

.addMesh( mesh )

.isDisregardMesh( )

.providesAlteredMeshes( )

WorkerSupport

Конструктор

WorkerSupport( )

Методы

.setLogging( enabled, debug )

.setForceWorkerDataCopy( forceWorkerDataCopy )

.validate( functionCodeBuilder, Array of libLocations, libPath, runnerImpl )

.setTerminateRequested( terminateRequested )

.setCallbacks( builder, onLoad )

.run( payload )

WorkerRunnerRefImpl

Конструктор

WorkerRunnerRefImpl( )

Методы

.applyProperties( parser, params )

.run( payload )

WorkerDirector

Конструктор

WorkerDirector( classDef )

Методы

.setLogging( enabled, debug )

.setForceWorkerDataCopy( forceWorkerDataCopy )

.prepareWorkers( globalCallbacks, maxQueueSize, maxWebWorkers )

.enqueueForRun( 
run params - параметры запуска')" onmouseout="hide()">runParams )

.processQueue( )

.tearDown( callbackOnFinishedProcessing )

.getMaxQueueSize( )

.getMaxWebWorkers( )

.isRunning( )

.setCrossOrigin( crossOrigin )

ResourceDescriptor

Конструктор

ResourceDescriptor( 
- единообразный локатор (определитель
местонахождения) ресурса')" onmouseout="hide()">url, extension )

Методы

.setContent( content )

PrepData

Конструктор

PrepData( modelName )

Методы

.setLogging( enabled, debug )

.getCallbacks( )

.addResource( 
resource - ресурс')" onmouseout="hide()">resource )

.checkResourceDescriptorFiles( 
resources - ресурсы')" onmouseout="hide()">resources, fileDesc )

clone - клонировать')" onmouseout="hide()">.clone( )

Callbacks

Конструктор

Callbacks( )

Методы

обратного вызова на событие «ход процесса»')" onmouseout="hide()">.setCallbackOnProgress( 
вызова на событие «ход процесса»')" onmouseout="hide()">callbackOnProgress )

функцию обратного вызова на изменение
сетки')" onmouseout="hide()">.setCallbackOnMeshAlter( 
обратного вызова на изменение сетки')" onmouseout="hide()">callbackOnMeshAlter )

функцию обратного вызова на загрузку')" onmouseout="hide()">.setCallbackOnLoad( callbackOnLoad )

- установить функцию обратного
вызова на загрузку материалов')" onmouseout="hide()">.setCallbackOnLoadMaterials( 
обратного вызова на загрузку материалов')" onmouseout="hide()">callbackOnLoadMaterials )

Validator

Конструктор

Validator( )

Методы

.isValid( input )

.verifyInput( input, defaultValue )

Исходники

PCDLoader

Пример

// instantiate a loader (создание экземпляра загрузчика)
var loader = new THREE.PCDLoader();

// load a resource (загрузка ресурса)
loader.load(
  // resource URL (URL-адрес ресурса)
  'pointcloud.pcd',

  // called when the resource is loaded (вызывается по завершении загрузки)
  function ( mesh ) {
    scene.add( mesh );
  },

  // called when loading is in progresses (вызывается во время загрузки)
  function ( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  },

  // called when loading has errors (вызывается при ошибках в загрузке)
  function ( error ) {
    console.log( 'An error happened' );
  }
);

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

webgl / loader / pcd

Конструктор

PCDLoader( 
manager - менеджер, управляющий')" onmouseout="hide()">manager )

Свойства

.littleEndian

Методы

.load( 
- единообразный локатор (определитель
местонахождения) ресурса')" onmouseout="hide()">url, onLoad, onProgress, onError )

parse - разбор, синтаксический анализ')" onmouseout="hide()">.parse( data, url )

Исходники

PDBLoader

Пример

// instantiate a loader (создание экземпляра загрузчика)
var loader = new THREE.PDBLoader();

// load a PDB resource (загрузка PDB ресурса)
loader.load(
  // resource URL (URL-адрес ресурса)
  'models/molecules/caffeine.pdb',

  // called when the resource is loaded (вызывается по завершении загрузки)
  function ( pdb ) {
    var geometryAtoms = pdb.geometryAtoms;
    var geometryBonds = pdb.geometryBonds;
    var json = pdb.json;
    console.log( 'This molecule has ' + json.atoms.length + ' atoms' );
  },

  // called when loading is in progresses (вызывается во время загрузки)
  function ( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  },

  // called when loading has errors (вызывается при ошибках в загрузке)
  function ( error ) {
    console.log( 'An error happened' );
  }
);

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

webgl / loader / pdb

Конструктор

PDBLoader( 
manager - менеджер, управляющий')" onmouseout="hide()">manager )

Свойства

Методы

.load( 
- единообразный локатор (определитель
местонахождения) ресурса')" onmouseout="hide()">url, onLoad, onProgress, onError )

.parse( text )

Исходники

SVGLoader

Пример

// instantiate a loader (создание экземпляра загрузчика)
var loader = new THREE.SVGLoader();

// load a SVG resource (загрузка SVG ресурса)
loader.load(
  // resource URL (URL-адрес ресурса)
  'data/svgSample.svg',

  // called when the resource is loaded (вызывается по завершении загрузки)
  function ( doc ) {
    scene.add( new THREE.SVGObject(doc) );
  },

  // called when loading is in progresses (вызывается во время загрузки)
  function ( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  },

  // called when loading has errors (вызывается при ошибках в загрузке)
  function ( error ) {
    console.log( 'An error happened' );
  }
);

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

webgl / loader / svg

Конструктор

SVGLoader( 
manager - менеджер, управляющий')" onmouseout="hide()">manager )

Свойства

Методы

.load( 
— единообразный локатор (определитель местонахождения)
ресурса')" onmouseout="hide()">url, onLoad, onProgress, onError )

Исходники

TGALoader

Пример

// instantiate a loader (создание экземпляра загрузчика)
var loader = new THREE.TGALoader();

// load a resource (загрузка ресурса)
var texture = loader.load(
  // resource URL (URL-адрес ресурса)
  'textures/crate_grey8.tga'

  // called when loading is completed (вызывается по завершении загрузки)
  function ( texture ) {
    console.log( 'Texture is loaded' );
  },

  // called when the loading is in progresses (вызывается во время загрузки)
  function ( xhr ) {
     console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  },

  // called when the loading failes (вызывается при ошибках в загрузке)
  function ( error ) {
    console.log( 'An error happened' );
  }
);

var material = new THREE.MeshPhongMaterial( {
  color: 0xffffff,
  map: texture
} );

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

webgl / loader / texture / tga

Конструктор

TGALoader( 
manager - менеджер, управляющий')" onmouseout="hide()">manager )

Методы

load - загрузить')" onmouseout="hide()">.load( 
- единообразный локатор (определитель
местонахождения) ресурса')" onmouseout="hide()">url, onLoad, onProgress, onError )

Исходники

PRWMLoader

Пример

// instantiate a loader (создание экземпляра загрузчика)
var loader = new THREE.PRWMLoader();

// load a resource (загрузка ресурса)
loader.load(
  // resource URL (URL-адрес ресурса)
  'models/nefertiti.le.prwm',

  // called when resource is loaded (вызывается по завершении загрузки)
  function ( bufferGeometry ) {
  var object = new THREE.Mesh( bufferGeometry, new THREE.MeshNormalMaterial() );
    scene.add( object );
  },

  // called when loading is in progresses (вызывается во время загрузки)
  function ( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  },

  // called when loading has errors (вызывается при ошибках в загрузке)
  function ( error ) {
    console.log( 'An error happened' );
  }
);

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

webgl / loader / prwm

Конструктор

PRWMLoader( 
manager - менеджер, управляющий')" onmouseout="hide()">manager )

Свойства

Методы

.load( 
- единообразный локатор (определитель
местонахождения) ресурса')" onmouseout="hide()">url, onLoad, onProgress, onError )

parse - разбор, синтаксический анализ')" onmouseout="hide()">.parse( arrayBuffer )

.isBigEndianPlatform( )

Исходники

Дополнительные замечания

MMDLoader

Пример

// Instantiate a loader (создание экземпляра загрузчика)
var loader = new THREE.MMDLoader();

// Load a MMD model (загрузка MMD модели)
loader.load(
  // path to PMD/PMX file (путь к PMD/PMX файлу
  'models/mmd/miku.pmd',

  // called when the resource is loaded (вызывается по окончании загрузки)
  function ( mesh ) {
    scene.add( mesh );
  },

  // called when loading is in progresses (вызывается в процессе загрузки)
  function ( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  },

  // called when loading has errors (вызывается при ошибках в загрузке)
  function ( error ) {
    console.log( 'Произошла ошибка' );
  }
);

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

webgl / loader / mmd
webgl / loader / mmd / pose
webgl / loader / mmd / audio

Конструктор

MMDLoader( 
manager - менеджер, управляющий')" onmouseout="hide()">manager )

Свойства

Методы

.load( 
- единообразный локатор (определитель
местонахождения) ресурса')" onmouseout="hide()">url, onLoad, onProgress, onError )

.loadAnimation( 
- единообразный локатор (определитель
местонахождения) ресурса')" onmouseout="hide()">url, 
object - объект')" onmouseout="hide()">object, onLoad, onProgress, onError )

.loadWithAnimation( modelUrl, vmdUrl, onLoad, onProgress, onError )

set cross origin - установить перекрестный источник')" onmouseout="hide()">.setCrossOrigin( crossOrigin )

Исходники

Объекты

LensFlare

Пример

var light = new THREE.PointLight( 0xffffff, 1.5, 2000 );

var textureLoader = new THREE.TextureLoader();

var textureFlare0 = textureLoader.load( "textures/lensflare/lensflare0.png" );
var textureFlare1 = textureLoader.load( "textures/lensflare/lensflare2.png" );
var textureFlare2 = textureLoader.load( "textures/lensflare/lensflare3.png" );

var lensflare = new THREE.Lensflare();

lensflare.addElement( new THREE.LensflareElement( textureFlare0, 512, 0 ) );
lensflare.addElement( new THREE.LensflareElement( textureFlare1, 512, 0 ) );
lensflare.addElement( new THREE.LensflareElement( textureFlare2, 60, 0.6 ) );

light.add( lensflare );

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

webgl / lensflares

Конструктор

LensFlare( 
texture - текстура')" onmouseout="hide()">texture, size, distance, 
color - цвет')" onmouseout="hide()">color, 
blending - смешивание')" onmouseout="hide()">blending )

Свойства

.isLensflare

Исходники

Экспортеры

GLTFExporter

Пример

// Instantiate a exporter (создаем экземпляр экспортера)
var exporter = new THREE.GLTFExporter( defaultOptions );

// Parse the input and generate the glTF output
// анализ входных данных и генерация выходных данных glTF
exporter.parse( scene, function ( gltf ) {
	console.log( gltf );
	downloadJSON( gltf );
}, options );

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

misc / exporter / gltf

Конструктор

GLTFExporter( )

Методы

.parse( input, onCompleted, options )

exporter.parse( scene1, ...)

exporter.parse( [ scene1, scene2 ], ...)

exporter.parse( object1, ...)

exporter.parse( [ object1, object2 ], ...)

exporter.parse( [ scene1, object1, object2, scene2 ], ...)

Исходники

Плагины

Lut

Пример

var lut = new THREE.Lut( "rainbow", 512 );

var data = [0, 10.1, 4.2, 3.4, 63, 28];

lut.setMax(63);

color = lut.getColor(10);

Конструктор

Lut( colormap, numberOfColors )

Свойства

.minV

.maxV

.legend

Методы

.copy( 
lut - сокращ. англ. слов lookup table - таблица поиска, просмотра')" onmouseout="hide()">lut ) 
this - этот, данный')" onmouseout="hide()">this

.setLegendOn( parameters )

.setLegendOff

.setLegendLabels( parameters, callback )

set minV - установить значение minV')" onmouseout="hide()">.setminV( minV )

set maxV - установить значение maxV')" onmouseout="hide()">.setmaxV( maxV )

change number of colors - изменить число значений цвета')" onmouseout="hide()">.changeNumberOfColors( numberOfColors )

change color map - изменить карту цвета')" onmouseout="hide()">.changeColorMap( colorMap )

add color map - добавить карту цвета')" onmouseout="hide()">.addColorMap( colorMapName, arrayOfColors )

get color - получить цвет')" onmouseout="hide()">.getColor( value ) 
this - этот, данный')" onmouseout="hide()">this

Исходники

SpriteCanvasMaterial

Конструктор

SpriteCanvasMaterial( parameters )

Свойства

color - цвет')" onmouseout="hide()">.color

Методы

.program( 
context - контекст')" onmouseout="hide()">context, 
color - цвет')" onmouseout="hide()">color )

Исходники

QuickHull

Face

Конструктор

Face( )

Свойства

normal - нормаль')" onmouseout="hide()">.normal

midpoint - средняя точка')" onmouseout="hide()">.midpoint

.area

.constant

outside - за пределами, снаружи')" onmouseout="hide()">.outside

.mark

edge - ребро, край')" onmouseout="hide()">.edge

Методы

create - создать')" onmouseout="hide()">.create( a, b, c )

get edge - получить ребро')" onmouseout="hide()">.getEdge( i )

compute - вычислить')" onmouseout="hide()">.compute( )

.distanceToPoint( 
point - точка')" onmouseout="hide()">point )

Исходники

HalfEdge

Конструктор

HalfEdge( 
vertex - вершина')" onmouseout="hide()">vertex, 
face - грань')" onmouseout="hide()">face )

Свойства

vertex - вершина')" onmouseout="hide()">.vertex

prev - сокращ. англ. слова previous - предыдущий')" onmouseout="hide()">.prev

next - следующий')" onmouseout="hide()">.next

twin - двойной')" onmouseout="hide()">.twin

face - грань')" onmouseout="hide()">.face

Методы

head - голова')" onmouseout="hide()">.head( )

tail - хвост')" onmouseout="hide()">.tail()

.length( )

.lengthSquared( )

set twin - установить двойника (парное ребро)')" onmouseout="hide()">.setTwin( 
edge - ребро')" onmouseout="hide()">.edge )

Исходники

QuickHull

Конструктор

QuickHull( )

Свойства

.tolerance

.faces

.newFaces

assigned - присвоить, назначить')" onmouseout="hide()">.assigned

unassigned - неназначить, отменить присвоенное')" onmouseout="hide()">.unassigned

.vertices

Методы

set from points - установить из точек')" onmouseout="hide()">.setFromPoints( points )

set from object - установить из объекта')" onmouseout="hide()">.setFromObject( 
object - объект')" onmouseout="hide()">object )

make empty - сделать пустой')" onmouseout="hide()">.makeEmpty( )

add vertex to face - добавить вершину к грани')" onmouseout="hide()">.addVertexToFace( 
vertex - вершина')" onmouseout="hide()">vertex, 
face - грань')" onmouseout="hide()">face )

remove vertex from face - удалить вершину грани')" onmouseout="hide()">.removeVertexFromFace( 
vertex - вершина')" onmouseout="hide()">vertex, 
face - грань')" onmouseout="hide()">face )

remove all vertices from face - удалить все вершины грани')" onmouseout="hide()">.removeAllVerticesFromFace( 
face - грань')" onmouseout="hide()">face )

delete face vertices - удалить вершины грани')" onmouseout="hide()">.deleteFaceVertices( 
face - грань')" onmouseout="hide()">face, 
absorbing face - поглощающая грань')" onmouseout="hide()">absorbingFace )

resolve unassigned points - разрешить неназначенные точки')" onmouseout="hide()">.resolveUnassignedPoints( newFaces )

.computeExtremes( )

compute initial hull - вычислить начальную оболочку')" onmouseout="hide()">.computeInitialHull( )

reindex faces - переиндексация граней')" onmouseout="hide()">.reindexFaces()

next vertex to add - следующая добавляемая вершина')" onmouseout="hide()">.nextVertexToAdd( )

compute horizon - вычислить горизонт')" onmouseout="hide()">.computeHorizon( 
eye point - ')" onmouseout="hide()">eyePoint, 
cross edge - ')" onmouseout="hide()">crossEdge, 
face - грань')" onmouseout="hide()">face, horizon )

add adjoining face - добавить прилегающую грань')" onmouseout="hide()">.addAdjoiningFace( 
eye vertex - вершина')" onmouseout="hide()">eyeVertex, 
horizon edge - край (ребро) горизонта')" onmouseout="hide()">horizonEdge )

add new faces - добавить новые грани')" onmouseout="hide()">.addNewFaces( 
eye vertex - вершина')" onmouseout="hide()">eyeVertex, 
horizon - горизонт')" onmouseout="hide()">horizon )

add vertex to hull - добавить вершину к оболочке')" onmouseout="hide()">.addVertexToHull( 
eye vertex - вершина')" onmouseout="hide()">eyeVertex )

clean up - очистить')" onmouseout="hide()">.cleanup( )

compute - вычислить')" onmouseout="hide()">.compute( )

Исходники

VertexNode

Конструктор

VertexNode( 
point - точка')" onmouseout="hide()">point )

Свойства

point - точка')" onmouseout="hide()">.point

prev - сокращ. англ. слова previous - предыдущий')" onmouseout="hide()">.prev

next - следующий')" onmouseout="hide()">.next

face - грань')" onmouseout="hide()">.face

Исходники

VertexList

Конструктор

VertexList( )

Свойства

head - голова')" onmouseout="hide()">.head

tail - хвост, окончание')" onmouseout="hide()">.tail

Методы

first - первый')" onmouseout="hide()">.first( )

last - последний')" onmouseout="hide()">.last( )

clear - очистить')" onmouseout="hide()">.clear( )

insert before - вставить перед')" onmouseout="hide()">.insertBefore( 
target - цель')" onmouseout="hide()">target, 
vertex - вершина')" onmouseout="hide()">vertex )

insert after - вставить после')" onmouseout="hide()">.insertAfter( 
target - цель')" onmouseout="hide()">target, 
vertex - вершина')" onmouseout="hide()">vertex )

append - добавлять, присоединять')" onmouseout="hide()">.append( 
vertex - вершина')" onmouseout="hide()">vertex )

append chain - добавить цепочку')" onmouseout="hide()">.appendChain( 
vertex - вершина')" onmouseout="hide()">vertex )

remove - удалить')" onmouseout="hide()">.remove( 
vertex - вершина')" onmouseout="hide()">vertex )

remove sublist - удалить вложенный список')" onmouseout="hide()">.removeSubList( 
a - первая буква алфавита - здесь просто
обозначение первой (головной) вершины')" onmouseout="hide()">a, 
b - вторая буква алфавита - здесь просто
обозначение конечной (хвостовой) вершины')" onmouseout="hide()">b )

.isEmpty( )

Исходники

Визуализаторы

CanvasRenderer

function webglAvailable() {
  try {
    var canvas = document.createElement( 'canvas' );
    return !!( window.WebGLRenderingContext && (
        canvas.getContext( 'webgl' ) ||
        canvas.getContext( 'experimental-webgl' ) )
      );
    } catch ( e ) {
      return false;
    }
  }

  if ( webglAvailable() ) {
    renderer = new THREE.WebGLRenderer();
  } else {
    renderer = new THREE.CanvasRenderer();
  }

Конструктор

CanvasRenderer( parameters )

Свойства

.info

render:       -- визуализация
  vertices    -- вершины
  faces       -- грани

.domElement

.autoClear

.sortObjects

.sortElements

Методы

.render( 
scene - сцена')" onmouseout="hide()">scene, 
camera - камера')" onmouseout="hide()">camera )

.clear()

.setClearColor( 
color - цвет')" onmouseout="hide()">color, alpha )

.setSize( width, height )

.setClearColorHex( hex, alpha )

.getClearColorHex( )

.getClearAlpha()

.clearColor()
.clearDepth()
.clearStencil()
.setFaceCulling()
.supportsVertexTextures()
.getMaxAnisotropy() - возвращает 1.

Исходники

CSS2DRenderer

Примеры

molecules

Конструктор

CSS2DRenderer()

Методы

.getSize( )

.render( 
scene - сцена')" onmouseout="hide()">scene, 
camera - камера')" onmouseout="hide()">camera )

.setSize( width, height )

Исходники

CSS3DRenderer

• нельзя использовать систему материалов three.js.
• также нет возможности использовать геометрические элементы (Geometry).
• на данный момент поддерживается только камера с перспективной проекцией.

Примеры

molecules
panorama
periodictable
sprites

Конструктор

CSS3DRenderer( )

Методы

.getSize( )

.render( 
scene - сцена')" onmouseout="hide()">scene, 
camera - камера')" onmouseout="hide()">camera )

.setSize( width, height )

Исходники

SVGRenderer

• анимированные логотипы или иконки
• интерактивные двух-трехмерные диаграммы и графики.
• интерактивные карты
• сложные или анимированные пользовательские интерфейсы.

• нет дополнительной тонировки
• не поддерживается текстура
• не поддерживается тень.

Примеры

lines
sandbox

Конструктор

SVGRenderer( )

Методы

.clear( )

.render( 
scene - сцена')" onmouseout="hide()">scene, 
camera - камера')" onmouseout="hide()">camera )

.setClearColor( 
color - цвет')" onmouseout="hide()">color, alpha )

.setPrecision( precision )

.setQuality( )

.setSize( width, height )

Исходники

Подсобные функции (утилиты)

BufferGeometryUtils

Методы

.computeTangents( 
geometry - геометрия, в данном
случае - геометрический элемент')" onmouseout="hide()">geometry )

merge BufferGeometries - слить (соединить) экземпляры BufferGeometry')" onmouseout="hide()">.mergeBufferGeometries( 
случае - геометрические элементы')" onmouseout="hide()">geometries )

merge BufferAttributes - слить (соединить)
атрибуты буферных элементов')" onmouseout="hide()">.mergeBufferAttributes( attributes )

Исходники

SceneUtils

Методы

create multimaterial object - создать многоматериальный объект')" onmouseout="hide()">.createMultiMaterialObject( 
geometry - геометрия, в данном
случае - геометрический элемент')" onmouseout="hide()">geometry, materials )

.attach( 
child - ребёнок, в данном случае - дочерний объект')" onmouseout="hide()">child, 
scene - сцена')" onmouseout="hide()">scene, 
parent - родитель')" onmouseout="hide()">parent )

.detach( 
child - ребёнок, в данном случае - дочерний объект')" onmouseout="hide()">child, 
parent - родитель')" onmouseout="hide()">parent, 
scene - сцена')" onmouseout="hide()">scene )

Исходники

Анимация

      CCDIKSolver

Пример

var ikSolver;

// Load MMD resources and instantiate CCDIKSolver
// загрузка ресурсов MMD и создание экземпляра CCDIKSolver
new THREE.MMDLoader().load(
  'models/mmd/miku.pmd',
  function ( mesh ) {
    ikSolver = new CCDIKSolver( mesh, mesh.geometry.iks );
    scene.add( mesh );
  }
);

function render() {
  animate(); // update bones (обновление костей)
  if ( ikSolver !== undefined ) ikSolver.update();
  renderer.render( scene, camera );
}

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

webgl_loader_mmd
webgl_loader_mmd_pose
webgl_loader_mmd_audio

Конструктор

CCDIKSolver( 
mesh - сетка')" onmouseout="hide()">mesh, 
- (элементы) инверсной кинематики')" onmouseout="hide()">iks )

Свойства

- (элементы) инверсной кинематики')" onmouseout="hide()">.iks

mesh - сетка')" onmouseout="hide()">.mesh

Методы

.createHelper( )

update - обновить')" onmouseout="hide()">.update( )

Исходники

      MMDAnimationHelper

Пример

// Instantiate a helper
var helper = new THREE.MMDAnimationHelper();

// Load MMD resources and add to helper
new THREE.MMDLoader().loadWithAnimation(
  'models/mmd/miku.pmd',
  'models/mmd/dance.vmd',
  function ( mmd ) {
    helper.add( mmd.mesh, {
      animation: mmd.animation,
      physics: true
    } );

    scene.add( mmd.mesh );

    new THREE.AudioLoader().load(
      'audios/mmd/song.mp3',
      function ( buffer ) {
      var listener = new THREE.AudioListener();
      var audio = new THREE.Audio( listener )
        .setBuffer( buffer );
      listener.position.z = 1;

        scene.add( audio );
        scene.add( listener );
      }
    );
  }
);

function render() {
  helper.update( clock.getDelta() );
  renderer.render( scene, camera );
}

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

webgl_loader_mmd
webgl_loader_mmd_pose
webgl_loader_mmd_audio

Конструктор

MMDAnimationHelper( params : Object )

Свойства

.audio : Audio

.camera : Camera

.meshes : Array

.objects : WeakMap

.onBeforePhysics : function

Методы

.add ( object : Object3D, params : Object ) : MMDAnimationHelper

.enable ( key : string, enabled : Boolean ) : MMDAnimationHelper

.pose ( mesh : SkinnedMesh, vpd : Object, params : Object ) : MMDAnimationHelper

.remove ( object : Object3D ) : MMDAnimationHelper

.update ( delta : Nummber ) : MMDAnimationHelper

Исходники

      MMDPhysics

Пример

var physics;

// Load MMD resources and instantiate MMDPhysics
// Load MMD resources and instantiate MMDPhysics
new THREE.MMDLoader().load(
  'models/mmd/miku.pmd',
  function ( mesh ) {
    physics = new THREE.MMDPhysics( mesh )
    scene.add( mesh );
  }
);

function render() {
  var delta = clock.getDelta();
  animate( delta );  // update bones
  if ( physics !== undefined ) physics.update( delta );
  renderer.render( scene, camera );
}

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

webgl_loader_mmd
webgl_loader_mmd_audio

Конструктор

MMDPhysics( mesh : SkinnedMesh, rigidBodyParams, constraintParams, params )

Свойства

.mesh : Array

Методы

.createHelper () : MMDPhysicsHelper

.reset () : CCDIKSolver

.setGravity ( gravity : Vector3 ) : CCDIKSolver

.update ( delta : Number ) : CCDIKSolver

.warmup ( cycles : Integer ) : CCDIKSolver

Исходники