在three.js中使用WebGL渲染器点击圆圈

【问题标题】：Circles on click using WebGL renderer in three.js在three.js中使用WebGL渲染器点击圆圈
【发布时间】：2016-07-08 14:26:17
【问题描述】：

当你点击一个对象时，我想在一个对象上放置一个圆圈。

我更新了this example 以使用webGL 渲染器（我基本上将THREE.SpriteCanvasMaterial 更改为THREE.SpriteMaterial），但现在不仅圆变成了正方形，而且对象的表面也会出现故障。这是一个 JSFiddle，它演示了我的问题（单击要测试的对象）。

我在 stackoverflow 上发现了一些类似的问题，但我似乎无法在我的示例中使用它。有什么建议吗？

【问题讨论】：

标签： three.js

【解决方案1】：

您正在将精灵添加到移动的 3D 场景中，您想要的简单方法是添加球体

var particle = new THREE.Mesh(new THREE.SphereGeometry(10,10,10),
new THREE.MeshBasicMaterial({color:0xff0000}) );
particle.position.copy( intersects[ 0 ].point );
scene.add( particle );

如果您想要真正的平面圆形，您必须创建一个圆形几何图形并将其与对象正确对齐，使其位于矩形墙的顶部，如果您想要在转动对象时不变形的圆形，您将需要一些自定义着色器的东西

【讨论】：