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

另一个更新：属性的界面发生了一些变化：

对于r139

const dotGeometry = new THREE.BufferGeometry();
dotGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([0,0,0]), 3));
const dotMaterial = new THREE.PointsMaterial({ size: 0.1, color: 0xff0000 });
const dot = new THREE.Points(dotGeometry, dotMaterial);
scene.add(dot);

Answer 3

对于r125

摘录自 Threejs 官方示例。经过一些修改后如何让它工作。

var dotGeometry = new BufferGeometry();
dotGeometry.setAttribute( 'position', new Float32BufferAttribute( [0,0,0], 3 ) );
var dotMaterial = new PointsMaterial( { size: 0.1, color: 0x00ff00 } );
var dot = new Points( dotGeometry, dotMaterial );
scene.add( dot );