从Threes.js点生成网格 [英] Generate Mesh from Points Three.js

问题描述

我正在尝试通过鼠标单击生成的一堆点在三"中创建可点击的形状.

I'm trying to create a clickable shape in Three from a bunch of points that are generated by mouse click.

此代码可以正常工作:

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 get added, I can draw lines between them I just can't fill in the center so the mouse can detect it!

推荐答案

您可以使用 THREE.ConvexGeometry 从点创建网格.

You can create a mesh from points using THREE.ConvexGeometry.

var mesh = new THREE.ConvexGeometry( vertices_array );

例如，参见 http://threejs.org/examples/webgl_geometry_convex.html

这只是您要点的凸包，但是对于您的用例来说应该足够了.

This is just the convex hull of your points, but it should be sufficient for your use case.

您必须在源代码中明确包含Three.js文件 examples/js/geometries/ConvexGeometry.js .

You must include the three.js file examples/js/geometries/ConvexGeometry.js explicitly in your source code.

three.js r.84

three.js r.84

这篇关于从Threes.js点生成网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！