How to use Three.InstancedMesh in Aframe

I'm trying to implement instancing in Aframe using the ThreeJs InstancedMesh based on the example here: https://github.com/mrdoob/three.js/blob/master/examples/webgl_instancing_dynamic.html

Relevant section of code here:

    init: function() {          const {count, radius, scale, colors, positions} = this.data;            this.start = true;          this.dummy = new THREE.Object3D();          this.count = count;          this.startObject = new THREE.Object3D();          this.endObject = new THREE.Object3D();          this.instanceColors = new Float32Array(count * 3);          this.instanceColorsBase = new Float32Array(this.instanceColors.length);            this.vertices = [];          this.rotations = [];          for ( var i = 0; i < this.data.count; i ++ ) {              var x = this.data.positions[i][0] * this.data.scale;              var y = this.data.positions[i][1] * this.data.scale;              var z = this.data.positions[i][2] * this.data.scale;                var xEnd = x + this.data.endPositions[i][0] * this.data.scale;              var yEnd = y + this.data.endPositions[i][1] * this.data.scale;              var zEnd = z + this.data.endPositions[i][2] * this.data.scale;                this.vertices.push( x, y, z );              const rotation = this.getDirection({'x':x,'y':y,'z':z},                                             {'x':xEnd,'y':yEnd,'z':zEnd});              this.rotations.push(rotation.x, rotation.y, rotation.z);          }            let mesh;          let geometry;          let material;          const loader = new THREE.GLTFLoader();          const el = this.el;          loader.load("/assets/arrow/arrow.gltf", function ( model ) {              geometry = model.scene.children[0].children[0].geometry;                           geometry.computeVertexNormals();              geometry.scale( 0.03, 0.03, 0.03 );                material = new THREE.MeshNormalMaterial();                mesh = new THREE.InstancedMesh( geometry, material, count );              mesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage );              el.object3D.add(mesh);          } );          this.el.setAttribute("id", "cells");      },      setMatrix: function (start) {          if (this.mesh) {              for ( let i = 0; i < this.count; i ++ ) {                  var x = this.data.positions[i][0] * this.data.scale;                  var y = this.data.positions[i][1] * this.data.scale;                  var z = this.data.positions[i][2] * this.data.scale;                    var xEnd = x + this.data.endPositions[i][0] * this.data.scale;                  var yEnd = y + this.data.endPositions[i][1] * this.data.scale;                  var zEnd = z + this.data.endPositions[i][2] * this.data.scale;                  if (start) {                      this.dummy.position.set(xEnd, yEnd, zEnd);                  } else {                      this.dummy.position.set(x, y, z);                  }                  this.dummy.rotation.x = this.rotations[i][0];                  this.dummy.rotation.y = this.rotations[i][1];                  this.dummy.rotation.z = this.rotations[i][2];                  this.dummy.updateMatrix();                  this.mesh.setMatrixAt( i ++, this.dummy.matrix );              }              this.mesh.instanceMatrix.needsUpdate = true;          }      }      tick: function() {          this.setMatrix(this.start);          this.start = !this.start;      },  

No errors or relevant messages that I can see, but none of the instanced objects are rendering. I don't really have a good way to post an example unfortunately. Anyone know what I'm doing wrong?

https://stackoverflow.com/questions/65729937/how-to-use-three-instancedmesh-in-aframe January 15, 2021 at 11:05AM