Recently, I created a 2D floorplan drawing using three.js.
The shape was incorporated into the drawing with the following code snippet:
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(50, 0, 90),
new THREE.Vector3(130, 0, 95),
new THREE.Vector3(74, 0, -50)
);
geometry.faces.push(new THREE.Face3(0, 1, 2));
var material = new THREE.MeshBasicMaterial({ color: 0xff0000,opacity:0.9 });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.on('click', function (ev) {
console.log(ev);
});
I am currently working on adding a shape/geometry with partial opacity to the scene and enabling user interaction by allowing them to click on it. Upon clicking, I aim to trigger a JavaScript function on the webpage that retrieves a unique ID along with other custom attributes or properties of the clicked shape.
For handling events, I have opted for three.interaction.
My main challenge lies in determining where to store object attributes and how to access them. Can this be achieved within three.js? Furthermore, I am curious if there exists a method to customize the appearance of the clickable object upon hovering, such as changing its color?