您可以使用
THREE.Shape和
THREE.ShapeGeometry在
THREE.Mesh之前绘制填充多边形:
function createPolygon( poly ) {
var shape = new THREE.Shape();
shape.moveTo( poly[0][0], poly[0][1] );
for (var i = 1; i < poly.length; ++ i)
shape.lineTo( poly[i][0], poly[i][1] );
shape.lineTo( poly[0][0], poly[0][1] );
var geometry = new THREE.ShapeGeometry( shape );
var material = new THREE.MeshBasicMaterial( {
color: 0x800000
} );
return new THREE.Mesh(geometry, material);
}
var poly = [[0,1],[0.25,0],[0.5,0.5],[0.75,0],[1,1]];
scene.add(createPolygon(poly))
看例子:
var renderer, scene, camera, controls;
init();
animate();
function createLine(startX,startY,endX,endY) {
const geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(startX, startY, 0));
geometry.vertices.push(new THREE.Vector3(endX, endY, 0));
const material = new THREE.LineBasicMaterial({
color: 0xffffff
});
return new THREE.Line(geometry, material);
}
function createPolygon( poly ) {
var shape = new THREE.Shape();
shape.moveTo( poly[0][0], poly[0][1] );
for (var i = 1; i < poly.length; ++ i)
shape.lineTo( poly[i][0], poly[i][1] );
shape.lineTo( poly[0][0], poly[0][1] );
var geometry = new THREE.ShapeGeometry( shape );
var material = new THREE.MeshBasicMaterial( {
color: 0x800000
} );
return new THREE.Mesh(geometry, material);
}
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
//camera.position.set( 20, 20, 20 );
camera.position.z = 5;
window.onresize = resize;
var light = new THREE.HemisphereLight( 0xeeeeee, 0x888888, 1 );
light.position.set( 0, 20, 0 );
scene.add( light );
var poly = [[0,1],[0.25,0],[0.5,0.5],[0.75,0],[1,1]];
scene.add(createPolygon(poly))
for (var i = 0; i < poly.length-1; ++i)
{
var i2 = i
scene.add(createLine(poly[i][0],poly[i][1],poly[i2][0],poly[i2][1]));
}
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}