three.js如何渲染一个简单的白点/点/像素

Question

我正在使用THREE.WebGLRenderer，我想在3D空间的特定位置绘制一些相同大小的白点。

我应该使用精灵，计算2D屏幕坐标并使用SpriteMaterial.useScreenCoordinate吗？

我应该使用它们与相机的距离来重新计算精灵的大小吗？

我可以使用SpriteMaterial.scaleByViewport或SpriteMaterial.sizeAttenuation吗？有没有这方面的文件？

有类似GL_POINTS的东西吗？仅定义1个顶点并在该位置获得彩色像素会很不错。我应该尝试使用PointCloud吗？

感谢任何提示！

编辑：屏幕上所有点的大小应相同。

Answer 1

使用.sizeAttenuation和单顶点PointCloud有效，但感觉有点......过度设计：

var dotGeometry = new THREE.Geometry();
dotGeometry.vertices.push(new THREE.Vector3( 0, 0, 0));
var dotMaterial = new THREE.PointsMaterial( { size: 1, sizeAttenuation: false } );
var dot = new THREE.Points( dotGeometry, dotMaterial );
scene.add( dot );

Answer 2

对于 r125

摘自threejs官方example。经过这里的一些修改后，它是如何工作的。

var dotGeometry = new BufferGeometry();
dotGeometry.setAttribute( 'position', new Float32BufferAttribute( new Vector3().toArray(), 3 ) );
var dotMaterial = new PointsMaterial( { size: 0.1 } );
var dot = new Points( dotGeometry, dotMaterial );
scene.add( dot );