你如何从点创建一个对象，以便能够将它插入到 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

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

Points Billboards

Interactive Points

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

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

祝你好运！

Answer 2

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

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

这是'points'

之后的'[0]'

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

How do you create an object from points, in order to be able to insert it into a GUI?

html

3d

frontend

three.js