|
@@ -12,13 +12,13 @@
|
|
|
<div>
|
|
|
<p>تقوم كل الكائنات بشكل ألي بتحديث حالتها تلقائيًا إذا تمت إضافتها إلى المشهد باستخدام</p>
|
|
|
<code>
|
|
|
-var object = new THREE.Object3D();
|
|
|
+const object = new THREE.Object3D();
|
|
|
scene.add( object );
|
|
|
</code>
|
|
|
<p>أو إذا كانوا أبناء كائن آخر تمت إضافته إلى المشهد:</p>
|
|
|
<code>
|
|
|
-var object1 = new THREE.Object3D();
|
|
|
-var object2 = new THREE.Object3D();
|
|
|
+const object1 = new THREE.Object3D();
|
|
|
+const object2 = new THREE.Object3D();
|
|
|
|
|
|
object1.add( object2 );
|
|
|
scene.add( object1 ); //object1 and object2 will automatically update their matrices
|
|
@@ -49,36 +49,36 @@ object.updateMatrix();
|
|
|
سنستخدم مثال السطر الذي سيتم تمديده في وقت العرض. سنخصص مساحة في المخزن المؤقت لـ 500 رأس لكننا نرسم اثنين فقط في البداية ، باستخدام [page:BufferGeometry.drawRange].
|
|
|
</p>
|
|
|
<code>
|
|
|
-var MAX_POINTS = 500;
|
|
|
+const MAX_POINTS = 500;
|
|
|
|
|
|
// geometry
|
|
|
-var geometry = new THREE.BufferGeometry();
|
|
|
+const geometry = new THREE.BufferGeometry();
|
|
|
|
|
|
// attributes
|
|
|
-var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
|
|
|
+const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
|
|
|
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
|
|
|
|
|
|
// draw range
|
|
|
-var drawCount = 2; // draw the first 2 points, only
|
|
|
+const drawCount = 2; // draw the first 2 points, only
|
|
|
geometry.setDrawRange( 0, drawCount );
|
|
|
|
|
|
// material
|
|
|
-var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
|
|
|
+const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
|
|
|
|
|
|
// line
|
|
|
-var line = new THREE.Line( geometry, material );
|
|
|
+const line = new THREE.Line( geometry, material );
|
|
|
scene.add( line );
|
|
|
</code>
|
|
|
<p>
|
|
|
بعد ذلك سنضيف نقاطًا بشكل عشوائي إلى الخط باستخدام نمط مثل:
|
|
|
</p>
|
|
|
<code>
|
|
|
-var positions = line.geometry.attributes.position.array;
|
|
|
+const positions = line.geometry.attributes.position.array;
|
|
|
|
|
|
-var x, y, z, index;
|
|
|
+let x, y, z, index;
|
|
|
x = y = z = index = 0;
|
|
|
|
|
|
-for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {
|
|
|
+for ( let i = 0, l = MAX_POINTS; i < l; i ++ ) {
|
|
|
|
|
|
positions[ index ++ ] = x;
|
|
|
positions[ index ++ ] = y;
|
|
@@ -130,7 +130,7 @@ line.geometry.computeBoundingSphere();
|
|
|
تتحكم العلامات التالية في تحديث سمات الهندسة المختلفة. قم بتعيين العلامات فقط للسمات التي تحتاج إلى تحديثها ، فالتحديثات مكلفة. بمجرد تغيير المخازن المؤقتة ، يتم إعادة تعيين هذه العلامات تلقائيًا إلى false. تحتاج إلى الاستمرار في ضبطها على true إذا كنت تريد الاستمرار في تحديث المخازن المؤقتة. لاحظ أن هذا ينطبق فقط على [page:Geometry] وليس [page:BufferGeometry].
|
|
|
</p>
|
|
|
<code>
|
|
|
-var geometry = new THREE.Geometry();
|
|
|
+const geometry = new THREE.Geometry();
|
|
|
geometry.verticesNeedUpdate = true;
|
|
|
geometry.elementsNeedUpdate = true;
|
|
|
geometry.morphTargetsNeedUpdate = true;
|