ОБНОВЛЕНИЕ ОБЪЕКТОВ


По умолчанию, все объекты автоматически обновляют свои матрицы в момент добавленния на сцену таким образом:
var object = new THREE.Object3D();
scene.add( object );
или же если они являются дочерними элементами другого объекта, который так же был добавлен в сцену:
var object1 = new THREE.Object3D();
var object2 = new THREE.Object3D();

object1.add( object2 );
scene.add( object1 ); //object1 и object2 автоматически обновят свои матрицы
Однако, если вы знаете, что созданный объект будет статичным, то можно просто отключить автоматическое обновление матрицы делать это вручную вручную, когда необходимо.
object.matrixAutoUpdate  = false;
object.updateMatrix();

геометрии


BufferGeometry

BufferGeometrics хранит информацию (координаты вершин, индексы поверхностей, нормали, цвета, UVs и иные пользовательские атрибуты) в буферах в виде типизированных массивов. Такой подход делает BufferGeometrics более быстрыми, по сравнению со стандартными геометриями, но и работать с ними тяжелее.

Так же стоит иметь в виду, что при обновлении BufferGeometries вы не можете изменять размер буферов (это достаточно тяжелая операция, эквивалентная созданию новой геометрии). Однако вы можете обновлять содержимое буферов.

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

Покажем это на примере примере линии, которая расширяется во время рендеринга. Выделим пространство в буфере для 500 вершин, но сперва добавим только две, используя BufferGeometry.drawRange.


var MAX_POINTS = 500;

// geometry
var geometry = new THREE.BufferGeometry();

// attributes
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// draw range
var drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );

// material
var material = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 2 } );

// line
var line = new THREE.Line( geometry,  material );
scene.add( line );
Затем добавим к линии рандомные точки:

var positions = line.geometry.attributes.position.array;

var x, y, z, index;
x = y = z = index = 0;

for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

    x += ( Math.random() - 0.5 ) * 30;
    y += ( Math.random() - 0.5 ) * 30;
    z += ( Math.random() - 0.5 ) * 30;

}
Если вы хотите изменить количество точек, отображаемых после первого рендеринга, то сделайте следующее:

line.geometry.setDrawRange( 0, newValue );
Если же вы хотите изменить значения данных после первого рендеринга, вам необходимо установить для него нужный флаг:

line.geometry.attributes.position.needsUpdate = true; // required after the first render
Тут показан результат работы кода, который вы можете изменить по своему усмотрению.

Примеры:

WebGL / custom / attributes

WebGL / buffergeometry / custom / attributes / particles

Geometry

Следующие флаги управляют обновлением различных атрибутов геометрии. Установите флаги только для атрибутов, которые необходимо обновлять, т.к. любое обновленте является ресурсоёмким процессом. После изменения буферов эти флаги автоматически возвращаются в false. Вам нужно сохранить значение true, если вы хотите продолжать обновление буферов. Обратите внимание, что это относится только к Geometry, а не к BufferGeometry.


var geometry = new THREE.Geometry();
geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.morphTargetsNeedUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
geometry.tangentsNeedUpdate = true;
В версиях ниже r66, меши требуется включить динамический флаг (чтобы сохранить внутренние типизированные массивы)

//removed after r66
geometry.dynamic = true;
Примеры:

WebGL / geometry / dynamic

материалы

All uniforms values can be changed freely (e.g. colors, textures, opacity, etc), values are sent to the shader every frame.

Also GLstate related parameters can change any time (depthTest, blending, polygonOffset, etc).

Flat / smooth shading is baked into normals. You need to reset normals buffer (see above).

The following properties can't be easily changed at runtime (once the material is rendered at least once):

Яндекс.Метрика