如何从点创建对象，以便能够将其插入 GUI 中？
我目前正在关注 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)`}
I am currently following Bruno Simons Three.js journey, in the section regarding Mixing Html with WebGl, in the tutorial you are essentially trying to pin a text box to a 3D model.
I have the GUI imported and ready but I'm finding it hard to understand what it is I need to 'gui.add(...)' to be able to tweak the position of the text in the 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')
}
]
in the tick function
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)`}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
对于其他遇到此问题的人来说，答案是 GUI 必须在对象后面添加索引：
即“
points”后面的'[0]'The Answer for anyone else who has this problem is that the GUI must be added with the index after the object:
which is the
'[0]'after the 'points'看一下粒子系统上使用点的这些示例：
点广告牌
互动点
而不是使用点，您可以将图像映射到该点。看看这个令人惊叹的粒子系统效果，它实际上映射如果您看到代码，则可以看到效果图。
因此，回顾一下，您需要将图像映射到您的点。 此处 是一个很好的入门教程。
祝你好运！
Take a look at these examples on Particle Systems using points:
Points Billboards
Interactive Points
Instead of using points, you can map an image to the point. Take a look at this amazing particle system for effects, which actually maps an image of the effect if you see the code.
So, to recap, you would want to map an image to your point(s). Here is a great tutorial to get you started.
Good luck!