你如何从点创建一个对象，以便能够将它插入到 GUI 中？答案

【问题标题】：How do you create an object from points, in order to be able to insert it into a GUI?你如何从点创建一个对象，以便能够将它插入到 GUI 中？
【发布时间】：2022-11-22 17:32:36
【问题描述】：

我目前正在关注 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)`}

【问题讨论】：

如果您能赞成我的回答，那就太好了。

标签： html three.js 3d frontend

【解决方案1】：

对于遇到此问题的任何其他人的答案是必须在对象之后添加 GUI 和索引：

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

这是“points”之后的'[0]'

【讨论】：

如果你能接受我的回答就太好了

【解决方案2】：

使用点查看有关粒子系统的这些示例：

Points Billboards

Interactive Points

您可以将图像映射到点，而不是使用点。看看this惊人的效果粒子系统，如果您看到代码，它实际上会映射效果的图像。

因此，回顾一下，您可能希望将图像映射到您的点。 Here 是一个很好的入门教程。

祝你好运！

【讨论】：

我想这就是非常感谢你救了我的命！！！
当然！乐意效劳：）