如何从点创建对象，以便能够将其插入GUI

Question

我目前正在关注Bruno Simons Three.js的旅程，在关于将Html与WebGl混合的部分中，在教程中，您实际上是在尝试将文本框固定到3D模型上。我已经导入并准备好了GUI，但我发现很难理解它是什么——我需要"GUI.add(…("才能调整GUI中文本的位置。

HTML

<div class="point point-0">
<div class="label">1</div>
<div class="text">Lorem ipsum dolor sit amet consectetur, 
adipisicing elit. Neque commodi consequatur maxime.
</div>

Javascript

const points = [
{
position: new THREE.Vector3(1.55, 0.1,  1.9),
element: document.querySelector('.point-0')
}

]

勾选功能

for(const point of points)
{
const screenPosition = point.position.clone()
screenPosition.project(camera)
const translateX = screenPosition.x * sizes.width * 0.5
const translateY = - screenPosition.y * sizes.height * 0.5
point.element.style.transform = `translate(${translateX}px, ${translateY}px)`}

Answer 1

对于其他有此问题的人来说，答案是GUI必须在对象后面添加索引：

`gui.add(points[0].position, 'y')`

是‘points’之后的'[0]'

Answer 2

看看粒子系统上使用点的这些例子：

积分牌

交互式点

您可以将图像映射到该点，而不是使用点。看看这个神奇的粒子系统的效果，如果你看到代码，它实际上会映射效果的图像。

因此，概括一下，您可能希望将图像映射到您的点。这是一个很好的教程，让你开始。

祝你好运！