three.js - threejs如何使点有方向

Question

我想在地球上实现一个指向地球中心的点系统，现在我正在使用 circleGeometry，它在可视化方面很好。但是如果我想大规模地生成和删除点。所有 circleGeometry 将被重新计算。性能不是那么好。之前我尝试用bufferGeometry和points来实现。然后，当点没有方向时，所有点总是面向相机。

那我现在能做什么？还有其他方法我可以试试吗？非常感谢您的帮助。

对应代码（使用circleGeometry）：

for (var city in Data) {
var result = returnSphericalCoordinates(
      Data[city].y,
      Data[city].x
);

sizes[city] = 3* Math.pow(Data[city].numPoints,1/2);
var geometry = new THREE.CircleGeometry( sizes[city]/2, 32 );
var texture = new THREE.TextureLoader().load('./disc.png')
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
var material = new THREE.MeshBasicMaterial({
map: texture,
transparent:true,
alphaTest: 0.2,
side: THREE.DoubleSide,
depthWrite: false
// antialias: true 
});
this.mesh = new THREE.Mesh(geometry, material);
this.mesh.position.set(result.x, result.y, result.z );
this.mesh.lookAt(new THREE.Vector3(0, 0, 0));

我试图使用的积分系统：

var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
geometry.computeBoundingSphere();

  // Make texture
var texture = new THREE.TextureLoader().load('./disc.png')
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

ShaderLoader('./pointshader.vert',
'./pointshader.frag',
function(vertex,fragment){
var material = new THREE.ShaderMaterial( {
uniforms: {
texture: {value : texture},
color: {value : new THREE.Color(0xffffff)}
},
vertexShader: vertex,
fragmentShader: fragment,
side: THREE.DoubleSide,
transparent: true,
alphaTest: 0.05,
// depthWrite: false
} );
this.globeDots = new THREE.(geometry, material);
this.globeDots.matrixAutoUpdate = false;
this.globeDots.lookAt(new THREE.Vector3(0, 0, 0));
props.threeObject.add(this.globeDots);
// })

在此处输入图像描述

标签： three.js3d