I'm attempting to create an interactive shape in Three.js by using points generated from mouse clicks.
Below is the code that I currently have:
mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / player.width ) * 2 - 1;
mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / player.height ) * 2 + 1
raycaster.setFromCamera( mouse, camera );
var objects = [];
objects.push(selectedHotspot);
var intersects = raycaster.intersectObjects( objects, true );
if ( intersects.length > 0 ) {
var point = new THREE.Mesh( new THREE.SphereGeometry(1, 1, 1), new THREE.MeshBasicMaterial( { color: 0x00ffff } ) );
point.position.copy(intersects[0].point);
scene.add(point);
points.push(intersects[0].point);
}
var geometry = new THREE.Geometry();
points.forEach( function( point ){
geometry.vertices.push( point );
});
geometry.vertices.push( points[0] );
geometry.faces.push( new THREE.Face3(0, 1, 2));
// material
var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
// line
var line = new THREE.Mesh( geometry, material );
scene.add( line );
hotspots.push( line );
The points are successfully added and lines are drawn between them. However, I am struggling with filling in the center so the shape can be detected by the mouse!