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

【问题标题】：three.js How to render a simple white dot/point/pixel三.js 如何渲染一个简单的白点/点/像素
【发布时间】：2014-12-05 12:18:02
【问题描述】：

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

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

我应该简单地使用精灵到相机的距离重新计算精灵的大小吗？

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

有类似 GL_POINTS 的东西吗？最好只定义 1 个顶点并在该位置获得一个彩色像素。我应该尝试使用 PointCloud 吗？

感谢任何提示！

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

【问题讨论】：

标签： three.js

【解决方案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 );

【讨论】：

如果创建新向量0,0,0，则无需定义，只需设置new THREE.Vector3()
raycaster.intersectObjects(dot.vertices) 不起作用，有什么办法可以通过鼠标选择顶点吗？
对我来说，这会导致“Uncaught TypeError: THREE.Geometry is not a constructor”
自 r125 以来，我认为他们已经删除了用于 BufferGeometry 的几何图形，如示例 threejs.org/docs/index.html?q=Float32BufferAttribute#api/en/… 中所示，我将修改该示例以适应单独答案中的问题

【解决方案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 );

【讨论】：

我不知道为什么，但我在尝试执行此操作时收到此错误。 hand-model-sample.js:109 Uncaught ReferenceError: Float32BufferAttribute is not defined