色彩饼状图（pie chart）
程序员文章站
2022-05-26 21:40:26
...
更多有趣示例 尽在 知屋安砖社区
示例
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Three.js 101</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
</head>
<body>
</body>
</html>
JS
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.2, 1000 );
camera.position.z = 4;
var renderer = new THREE.WebGLRenderer({antialias:true, alpha: true});
//renderer.setClearColor("#fff");
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const segments = [
{percent: 10, color: 0xbe0000},
{percent: 10, color: 0x00be00},
{percent: 10, color: 0x0033ff},
{percent: 20, color: 0xbe0000},
{percent: 10, color: 0xffffbe},
{percent: 40, color: 0x0033ff}
];
let start = 0;
let end;
let chart = new THREE.Group();
segments.forEach(segmentV => {
end = Math.PI * 2 / 100 * segmentV.percent;
console.log(start, end);
const geometry = new THREE.CircleGeometry( 2, 64, start, end);
start = start + end;
const material = new THREE.MeshBasicMaterial( { color: segmentV.color } );
const segment = new THREE.Mesh(geometry, material);
chart.add(segment);
});
const circle = new THREE.CircleGeometry(2, 64);
const material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
const pl = new THREE.Mesh(circle, material);
chart.add(pl);
var loader = new THREE.FontLoader();
scene.add(chart);
loader.load( 'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function ( font ) {
const text = new THREE.TextGeometry( '1465!', {
font: font,
size: 14,
height: 5,
curveSegments: 12,
});
scene.add(text);
});
renderer.render(scene, camera);
下一篇： PHP编写的网上调查投票系统