gpt4 book ai didi

javascript - 用颜色填充线条之间的区域 - Three.js

转载 作者:搜寻专家 更新时间:2023-11-01 05:03:32 26 4
gpt4 key购买 nike

我有一系列线条,我需要用一种颜色为线条下方或线条之间的所有区域着色。

为了简单起见,我创建了一个带有闭合线的片段。实际上,我有一个绘制多条线的程序(如股票市场图表),我需要为图表下方的所有区域着色。另请参阅屏幕截图。

如果我可能需要采取任何帮助或新方法,我将不胜感激。

enter image description here

<html>

<head>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}

canvas {
width: 100%;
height: 100%
}
</style>
</head>

<body>
<script src="https://threejs.org/build/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 500);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
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);
}
scene.add(createLine(0,0,1,0));
scene.add(createLine(1,0,1,1));
scene.add(createLine(1,1,0,1));
scene.add(createLine(0,1,0,0));

camera.position.z = 5;

var animate = function () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};

animate();
</script>
</body>

</html>

最佳答案

您可以使用 THREE.ShapeTHREE.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<poly.length-1 ? i+1 : 0
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%
}
<script src="https://cdn.jsdelivr.net/npm/three@0.124/build/three.js"></script>

关于javascript - 用颜色填充线条之间的区域 - Three.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46868061/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com