Javascript 如何使用three.js绘制圆而不是正方形？

我找到了three.js使用正方形创建二维绘图的示例：

// Global vars...
var container, camera, scene, geometry, mesh, renderer, controls, particles, colors;

// DOM element...
container = document.createElement('div');
document.body.appendChild(container);

// Camera...
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(00, 0, 75);

// Scene...
scene = new THREE.Scene();
scene.add(camera);

// Renderer...
renderer = new THREE.WebGLRenderer({
    clearAlpha: 1
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);                 

// Scatter plot...
scatterPlot = new THREE.Object3D();
scene.add(scatterPlot);

// Make grid...
xzColor = 'black';
xyColor = 'black';
yzColor = 'black';

// Plot some random points...
geometry = new THREE.Geometry();
colors = [];

for (var i = 0; i < 50; i++) {

    colors[i] = new THREE.Color(1, 1, 1);
    colors[i].setHSL(1000 / 2000, 1, 0.5);

    var material = new THREE.PointCloudMaterial({
        size: 5,
        vertexColors: THREE.VertexColors,
        transparent: true,
        useScreenCoordinates: false
    });

    material.color.setHSL(1.0, 0.2, 0.7);

    var vertex = new THREE.Vector3();

    var max = 50;
    var min = -50;

    vertex.x = Math.random() * (max - min) + min;
    vertex.y = Math.random() * (max - min) + min;
    vertex.z = Math.random() * (max - min) + min;

    geometry.vertices.push(vertex);

}

particles = new THREE.PointCloud(geometry, material);
particles.sortParticles = true;
scatterPlot.add(particles);

geometry.colors = colors;

animate();

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

//全局变量。。。
var容器、摄影机、场景、几何体、网格、渲染器、控件、粒子、颜色；
//DOM元素。。。
container=document.createElement（'div'）；
文件.正文.附件（容器）；
//照相机。。。
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（00,0,75）；
//场景。。。
场景=新的三个。场景（）；
场景。添加（摄影机）；
//渲染器。。。
renderer=new THREE.WebGLRenderer({
clearAlpha:1
});
renderer.setSize（window.innerWidth、window.innerHeight）；
setClearColor（0xffffff，1）；
document.body.appendChild（renderer.doElement）；
//散点图。。。
scatterPlot=new THREE.Object3D（）；
场景。添加（散点图）；
//制作网格。。。
xzColor=‘黑色’；
xyColor=‘黑色’；
yzColor=‘黑色’；
//绘制一些随机点。。。
几何体=新的三个。几何体（）；
颜色=[]；
对于（变量i=0；i<50；i++）{
颜色[i]=新的三种颜色（1,1,1）；
颜色[i].setHSL（1000/2000,1,0.5）；
var材料=新的三点云材料({
尺码：5，
顶点颜色：3。顶点颜色，
透明：是的，
使用屏幕坐标：false
});
材料.颜色.setHSL（1.0,0.2,0.7）；
var顶点=新的三个向量3（）；
var max=50；
var min=-50；
vertex.x=Math.random（）*（max-min）+min；
vertex.y=Math.random（）*（max-min）+min；
vertex.z=Math.random（）*（max-min）+min；
几何。顶点。推（顶点）；
}
粒子=新的三点云（几何体、材质）；
particles.sortParticles=true；
散点图。添加（粒子）；
geometry.colors=颜色；
制作动画（）；
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}

它在网页上绘制正方形，但我想绘制圆形。但是，我在代码中没有看到任何绘制正方形的地方。我的“猜测”是形状是由

THREE.PointCloudMaterial

设置的，但这似乎没有记录在文档中

---

那么，我如何画圆圈，以及在哪里找到文档，有什么想法吗？

这能解决问题吗？不是真的。我得到一个错误“error:WebGL:drawArray:Bounded vertex属性缓冲区没有足够的大小用于给定的first和count”，我替换了

geometry=new THREE.geometry（）具有
几何=新的三个。圆几何（50,64）。