After creating a pointcloud with all points in the same plane, I am looking to highlight and display it as a rectangle shape when the mouse hovers over. To achieve this, I believe the pointcloud needs to be converted into a mesh.
I've spent hours searching online and even tried reading through Three.js documentation but have not been able to find a solution. Could someone please assist me in converting this pointcloud to a mesh? Thank you so much
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var camera, scene, renderer, controls;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 5, 3500 );
camera.position.z = 2500;
controls = new THREE.TrackballControls( camera, renderer.domElement );
createScene();
}
function createScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
var geometry = new THREE.BufferGeometry();
var positions = [];
for ( var i = 0; i < 500; i ++ ) {
for ( var j = 0; j < 300; j ++ ) {
var y = j;
var x = i;
var z = 0;
positions.push( x, y, z );
}
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
var material = new THREE.PointsMaterial( {color: 0xFFFFFF} );
points = new THREE.Points( geometry, material );
scene.add( points );
}
function animate( time ) {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
</script>