Three.js 如何在Frame/three js中渲染成本较低的球体？

我有一个vr应用程序，可以渲染很多球体。内置的aframe

元素使用三角形渲染球体，因此我的场景中有大量三角形。这会扼杀性能，使帧速率下降到十几岁。有没有一个更有效的类似球体的物体我可以使用？这些球体真的不需要做任何特殊的事情，我愿意牺牲它们的外观，以便能够在不破坏性能的情况下渲染更多的球体

您可以求助于，它使用GPU实例在单个drawcall中呈现重复的几何体

查看下面的演示。渲染1000个元素通常需要1000个单独的DrawCall，这大大降低了性能。但通过实例化，可以在同一过程中渲染所有对象

var摄影机、场景、渲染器、统计信息；
var网格；
var amount=parseInt（window.location.search.substr（1））| | 10；
var计数=数学功率（金额，3）；
var dummy=new THREE.Object3D（）；
init（）；
制作动画（）；
函数init（）{
摄像头=新的三个透视摄像头（60，window.innerWidth/window.innerHeight，0.1100）；
摄像机位置设置（数量*0.9，数量*0.9，数量*0.9）；
摄像机。注视（0，0，0）；
场景=新的三个。场景（）；
var loader=new THREE.BufferGeometryLoader（）；
loader.load（'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/json/suzanne_buffergeometry.json，函数（几何）{
geometry.computeVertexNormals（）；
几何.比例（0.5,0.5,0.5）；
var material=新的三个.MeshNormalMaterial（）；
//支票透支
//var material=new THREE.MeshBasicMaterial（{color:0xff0000，不透明度：0.1，transparent:true}）；
网格=新的三个实例网格（几何体、材质、计数）；
mesh.instanceMatrix.setUsage（THREE.DynamicDrawUsage）；//将每帧更新一次
场景。添加（网格）；
//
var gui=new dat.gui（）；
添加（网格，'计数'，0，计数）；
} );
//
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//
统计数据=新统计数据（）；
document.body.appendChild（stats.dom）；
//
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
//
函数animate（）{
请求动画帧（动画）；
render（）；
stats.update（）；
}
函数render（）{
if（网格）{
var time=Date.now（）*0.001；
mesh.rotation.x=Math.sin（时间/4）；
mesh.rotation.y=Math.sin（时间/2）；
var i=0；
风险价值抵销=（金额-1）/2；
对于（变量x=0；x

html，正文{margin:0；padding:0；overflow:hidden；}

three.js webgl-实例-动态

您可以求助于，它使用GPU实例在单个drawcall中呈现重复的几何体

查看下面的演示。渲染1000个元素通常需要1000个单独的DrawCall，这大大降低了性能。但通过实例化，可以在同一过程中渲染所有对象

var摄影机、场景、渲染器、统计信息；
var网格；
var amount=parseInt（window.location.search.substr（1））| | 10；
var计数=数学功率（金额，3）；
var dummy=new THREE.Object3D（）；
init（）；
制作动画（）；
函数init（）{
摄像头=新的三个透视摄像头（60，window.innerWidth/window.innerHeight，0.1100）；
摄像机位置设置（数量*0.9，数量*0.9，数量*0.9）；
摄像机。注视（0，0，0）；
场景=新的三个。场景（）；
var loader=new THREE.BufferGeometryLoader（）；
loader.load（'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/json/suzanne_buffergeometry.json，函数（几何）{
geometry.computeVertexNormals（）；
几何.比例（0.5,0.5,0.5）；
var material=新的三个.MeshNormalMaterial（）；
//支票透支
//var material=new THREE.MeshBasicMaterial（{color:0xff0000，不透明度：0.1，transparent:true}）；
网格=新的三个实例网格（几何体、材质、计数）；
mesh.instanceMatrix.setUsage（THREE.DynamicDrawUsage）；//将每帧更新一次
场景。添加（网格）；
//
var gui=new dat.gui（）；
添加（网格，'计数'，0，计数）；
} );
//
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//
统计数据=新统计数据（）；
document.body.appendChild（stats.dom）；
//
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
//
函数animate（）{
请求动画帧（动画）；
render（）；
stats.update（）；
}
函数render（）{
if（网格）{
var time=Date.now（）*0.001；
mesh.rotation.x=数学