我有一系列线条,需要将线条下方或之间的区域涂上颜色。
为了简单起见,我创建了一个带有闭合线条的代码片段。实际情况是,我有一个绘制多条线条(类似于股市图表)的程序,我需要将图表下方的所有区域都涂上颜色。请参见截图。
如果您能提供任何帮助或新方法,我将不胜感激。
为了简单起见,我创建了一个带有闭合线条的代码片段。实际情况是,我有一个绘制多条线条(类似于股市图表)的程序,我需要将图表下方的所有区域都涂上颜色。请参见截图。
如果您能提供任何帮助或新方法,我将不胜感激。
<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.PlaneGeometry()
并改变它的上顶点。 - prisoner849