How to use the three.BufferAttribute function in three

function init(nodeCollection) {
    disconnectOldNodes();

    total = nodeCollection.length;
    nodes = nodeCollection;
    // if we can ruse old arrays - do it! No need to stress the GC
    var pointsInitialized = points !== undefined && points.length === total * 3;
    if (!pointsInitialized) points = new Float32Array(total * 3);
    var colorsInitialized = colors !== undefined && colors.length === total * 3;
    if (!colorsInitialized) colors = new Float32Array(total * 3);
    var sizesInitialized = sizes !== undefined && sizes.length === total;
    if (!sizesInitialized) sizes = new Float32Array(total);

    geometry = new THREE.BufferGeometry();

    geometry.addAttribute('position', new THREE.BufferAttribute(points, 3));
    geometry.addAttribute('customColor', new THREE.BufferAttribute(colors, 3));
    geometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));

    if (particleSystem) {
      scene.remove(particleSystem);
    }

    particleSystem = new THREE.Points(geometry, particleMaterial);
    particleSystem.name = 'nodes';
    particleSystem.frustumCulled = false;

    scene.add(particleSystem);

    for (var i = 0; i < total; ++i) {
      var node = nodes[i];
      // first make sure any update to underlying node properties result in

};

            // Allocate max size object
            let pArray = new Float32Array(pSize * 3);
            let iArray = new Uint32Array(iSize);

            for(let i = 0; i < pSize; i++) {
                pArray[i] = Math.random();
            }
            for(let i = 0; i < iSize; i++) {
                iArray[i] = i % pSize;
            }

            geom.addAttribute( 'position', new THREE.BufferAttribute( pArray, 3 ) );
            geom.setIndex( new THREE.BufferAttribute(  iArray, 1 ) );
            geom.addAttribute( 'color', new THREE.BufferAttribute( colorBuf, 3 ) );

            geom.computeFaceNormals();
            //geom.computeVertexNormals();

            this.renderer.render(this.scene, this.camera);
        } else {
            var renderInfo = this.meshMap[geo.name],
                geometry = renderInfo.mesh.geometry,
                colors = renderInfo.colorBuffer;

            if (geometry.vertices && geo.points.length !== geometry.vertices.length) {
                console.log("********  We may have a problem here, new point count = " + geo.points.length + ", old point count = " + geometry.vertices.length);
                // FIXME: Allocate new color buffer here
            }

            // geometry.setIndex( new THREE.BufferAttribute( geo.index, 1 ) );

if (!positionMap[key]) {
          positionMap[key] = layer.coordinateToVector3(lnglat).sub(centerPt);
        }
      }
    }

    var positions = getChunkLinesPosition(chunkLines.slice(0, 1), layer, positionMap, centerPt).positionsV; //generate geometry

    var geometry = new BufferGeometry();
    var ps = new Float32Array(MAX_POINTS * 3); // 3 vertices per point

    var norls = new Float32Array(MAX_POINTS * 3); // 3 vertices per point

    var inds = new Uint16Array(MAX_POINTS);
    geometry.addAttribute('position', new BufferAttribute(ps, 3).setDynamic(true));
    geometry.addAttribute('normal', new BufferAttribute(norls, 3).setDynamic(true));
    geometry.setIndex(new BufferAttribute(inds, 1));
    var lineWidth = layer.distanceToVector3(width, width).x;
    var depth = layer.distanceToVector3(height, height).x;
    var params = getExtrudeLineParams(positions, lineWidth, depth, layer);
    setExtrudeLineGeometryAttribute(geometry, params.position, params.normal, params.indices);

    _this._createMesh(geometry, material);

    var z = layer.distanceToVector3(altitude, altitude).x;
    var center = lineString.getCenter();
    var v = layer.coordinateToVector3(center, z);

    _this.getObject3d().position.copy(v);

    _this._params = {

vNew.normalize();
      normals.push(vNew.x, vNew.y, vNew.z);
    } // for (i) all vertices
    // copy triangles from generator
    for (let i = 0, j = 0; i < numTriangles; i++, j += INDICES_IN_TRI) {
      const triIndices = gen.getTriangle(i);
      //const faceNew = new THREE.Face3(triIndices[NUM_0], triIndices[NUM_1], triIndices[NUM_2]);
      indices.push(triIndices[NUM_0], triIndices[NUM_1], triIndices[NUM_2]);
    } // for (i) all triangles
    // old style: buffered geometry
    this.geometrySphere = new THREE.BufferGeometry();
    const posAttribute = new Float32Array(positions);
    const normalsAttribute = new Float32Array(normals);
    const indAttribute = new Uint8Array(indices);

    this.geometrySphere.addAttribute('position', new THREE.BufferAttribute(posAttribute, NUM_3));
    this.geometrySphere.addAttribute('normal', new THREE.BufferAttribute(normalsAttribute, NUM_3));
    this.geometrySphere.setIndex(new THREE.BufferAttribute(indAttribute, 1));
    this.computeGeometrySphereUVs();
    this.meshSphere = new THREE.Mesh(this.geometrySphere);
    this.sceneSphere.add(this.meshSphere);
    return this.meshSphere;
  }

let sinLon = Math.sin(-xyPositions[i] * radMult)
      let cosLat = Math.cos(xyPositions[i + 1] * radMult)
      let sinLat = Math.sin(xyPositions[i + 1] * radMult)
      let xyzIndex = i / 2 * 3
      xyzPositions[xyzIndex] = cosLat * cosLon //x
      xyzPositions[xyzIndex + 1] = sinLat //y
      xyzPositions[xyzIndex + 2] = cosLat * sinLon //z
      uvs[i] = (xyPositions[i] + 180) / 360 //u
      uvs[i + 1] = (xyPositions[i + 1] + 90) / 180 //v
    }

    // Init the buffer geometry with the projected vertices and triangulation indexes
    var positionAttr = new BufferAttribute(xyzPositions, 3)
    this.setAttribute('position', positionAttr)
    this.setAttribute('normal', positionAttr) //positions are based off r=1 so they can be used directly as normals
    this.setAttribute('uv', new BufferAttribute(uvs, 2))
    this.setIndex(new BufferAttribute(
      xyzPositions.length / 3 >> 16 === 0 ? new Uint16Array(indexes) :
      new Uint32Array(indexes)
    , 1))
  }
}

//
                            // THREE.KeyframeTrack infers tangents from the spline vertices when interpolating:
                            // those values are extracted below. This still guarantees smooth curves, but does
                            // throw away more precise information in the tangents. In the future, consider
                            // re-sampling at a higher framerate using the tangents provided.
                            //
                            // See: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#appendix-c-spline-interpolation

              for (var j = 0, jl = outputAccessor.count; j < jl; j += 3) {
                outputAccessorValues[ j * itemSize / 3 ] = outputAccessor.getX(j + 1)
                if (itemSize > 1) outputAccessorValues[ j * itemSize / 3 + 1 ] = outputAccessor.getY(j + 1)
                if (itemSize > 2) outputAccessorValues[ j * itemSize / 3 + 2 ] = outputAccessor.getZ(j + 1)
                if (itemSize > 3) outputAccessorValues[ j * itemSize / 3 + 3 ] = outputAccessor.getW(j + 1)
              }

              outputAccessor = new THREE.BufferAttribute(outputAccessorValues, itemSize / 3, outputAccessor.normalized)
            }

            var interpolation = sampler.interpolation !== undefined ? INTERPOLATION[ sampler.interpolation ] : THREE.InterpolateLinear

            var targetNames = []

            if (PATH_PROPERTIES[ target.path ] === PATH_PROPERTIES.weights) {
                            // node should be THREE.Group here but
                            // PATH_PROPERTIES.weights(morphTargetInfluences) should be
                            // the property of a mesh object under node.
                            // So finding targets here.

              node.traverse(function (object) {
                if (object.isMesh === true && object.material.morphTargets === true) {
                  targetNames.push(object.name ? object.name : object.uuid)
                }

normals.push(vNew.x, vNew.y, vNew.z);
    } // for (i) all vertices
    // copy triangles from generator
    for (let i = 0, j = 0; i < numTriangles; i++, j += INDICES_IN_TRI) {
      const triIndices = gen.getTriangle(i);
      //const faceNew = new THREE.Face3(triIndices[NUM_0], triIndices[NUM_1], triIndices[NUM_2]);
      indices.push(triIndices[NUM_0], triIndices[NUM_1], triIndices[NUM_2]);
    } // for (i) all triangles
    // old style: buffered geometry
    this.geometrySphere = new THREE.BufferGeometry();
    const posAttribute = new Float32Array(positions);
    const normalsAttribute = new Float32Array(normals);
    const indAttribute = new Uint8Array(indices);

    this.geometrySphere.addAttribute('position', new THREE.BufferAttribute(posAttribute, NUM_3));
    this.geometrySphere.addAttribute('normal', new THREE.BufferAttribute(normalsAttribute, NUM_3));
    this.geometrySphere.setIndex(new THREE.BufferAttribute(indAttribute, 1));
    this.computeGeometrySphereUVs();
    this.meshSphere = new THREE.Mesh(this.geometrySphere);
    this.sceneSphere.add(this.meshSphere);
    return this.meshSphere;
  }
  /**

function initDebugBounds() {
        boundsScene = new THREE.Scene();
        boundsVertexBuffer = new THREE.BufferAttribute(
            new Float32Array(32 * 4 * characterCount),
            4
        );
        boundsVertexBuffer.setDynamic(true);
        boundsGeometry = new THREE.BufferGeometry();
        boundsGeometry.addAttribute("position", boundsVertexBuffer);
        boundsObject = new THREE.Line(
            boundsGeometry,
            new THREE.LineBasicMaterial({
                color: 0xff0000,
                depthTest: false,
                depthWrite: false,
                transparent: true,
                opacity: 0.2
            })
        );

function cloneBufferAttribute(attribute) {
    if (attribute.isInterleavedBufferAttribute) {
      var count = attribute.count
      var itemSize = attribute.itemSize
      var array = attribute.array.slice(0, count * itemSize)

      for (var i = 0; i < count; ++i) {
        array[i] = attribute.getX(i)
        if (itemSize >= 2) array[i + 1] = attribute.getY(i)
        if (itemSize >= 3) array[i + 2] = attribute.getZ(i)
        if (itemSize >= 4) array[i + 3] = attribute.getW(i)
      }

      return new BufferAttribute(array, itemSize, attribute.normalized)
    }

    return attribute.clone()
  }

import React from 'react'
import {Group, Mesh, Line, BufferGeometry, BufferAttribute, MeshLambertMaterial, LineBasicMaterial, DoubleSide} from 'three'
import {Object3DFacade, HtmlOverlay3DFacade} from 'troika-3d'
import Tooltip from './Tooltip.jsx'


const wallsGeometry = new BufferGeometry()
wallsGeometry.setAttribute( 'position', new BufferAttribute(new Float32Array([
  0,0,0, 1,0,0, 1,0,1,
  0,0,0, 0,0,1, 1,0,1,

  0,1,0, 1,1,0, 1,1,1,
  0,1,0, 0,1,1, 1,1,1,

  0,0,0, 0,1,0, 0,1,1,
  0,0,0, 0,0,1, 0,1,1,

  1,0,0, 1,1,0, 1,1,1,
  1,0,0, 1,0,1, 1,1,1
]), 3))

/*
const wall1Geometry = new PlaneGeometry(1, 1)
wall1Geometry.rotateY(Math.PI / 2)