html区域填充颜色,javascript – 填充颜色的线条之间的区域 – Three.js

您可以使用

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%

}