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

user_18345342 0
Viewed 54

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)`}
three.js frontend 3d html
2 Answers

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!

user_167522100

The Answer for anyone else who has this problem is that the GUI must be added with the index after the object:

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

which is the '[0]' after the 'points'

user_183453420
Related