How to create sphere based pie chart with three.js? - three.js

Question

Is there a way to create similar mesh in three.js?
Basically this is 3D pie chart clipped by half-sphere.
The only idea I have is to use clipping planes. Is there more simple approach?

Answer 1

It really depends on exactly what you want but the SphereBufferGeometry has parameters to create less than the entire sphere. The 4th and 5th parameters set the start and length around the width. The 6th and 7th set the start and length around the height
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const scene = new THREE.Scene();
scene.background = new THREE.Color('white');
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 2, 1.5);
camera.lookAt(0, 0, 0);
const cameraStick = new THREE.Object3D();
scene.add(cameraStick);
cameraStick.add(camera);
function addLight(...pos) {
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(...pos);
scene.add(light);
}
addLight(-1, 2, 4);
addLight( 1, 2, -4);
const amounts = [
123,
47,
];
const total = amounts.reduce((a, b) => a + b);
amounts.reduce((amountSoFar, amount, ndx) => {
const geo = new THREE.SphereBufferGeometry(
1, // radius
32, // width segments
16, // height segments
amountSoFar / total * Math.PI * 2, // phiStart
amount / total * Math.PI * 2, // phiLength
0, // thetaStart
Math.PI / 2, // thetaLength
);
const mat = new THREE.MeshPhongMaterial();
mat.color.setHSL(amountSoFar / total, 1, 0.5);
scene.add(new THREE.Mesh(geo, mat));
return amountSoFar + amount;
}, 0);
function render(time) {
time *= 0.001;
cameraStick.rotation.y = time;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
</script>
If you want to seal the bottom and the sides you have several options.
Write your own sphere generation code. Just copy the source from three.js and add code to add the faces to seal the sides
Use CircleBufferGeometry that has similar parameters to make the sides and ends. It's up to you if you want to merge those into a single geometry.
Note that trying to draw a chart like that with transparency will have issues.
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const scene = new THREE.Scene();
scene.background = new THREE.Color('white');
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 2, 1.5);
camera.lookAt(0, 0, 0);
const cameraStick = new THREE.Object3D();
scene.add(cameraStick);
cameraStick.add(camera);
function addLight(...pos) {
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(...pos);
scene.add(light);
}
addLight(-1, 2, 4);
addLight( 1, 2, -4);
const amounts = [
120,
35,
];
const total = amounts.reduce((a, b) => a + b);
amounts.reduce((amountSoFar, amount, ndx) => {
const arc = amount / total * Math.PI * 2;
const base = new THREE.Object3D();
scene.add(base);
base.rotation.y = (amountSoFar / total) * Math.PI * 2 + arc / 2;
const offset = new THREE.Object3D();
offset.position.x = -0.05;
base.add(offset);
const geo = new THREE.SphereBufferGeometry(
1, // radius
32, // width segments
16, // height segments
-arc / 2, // phiStart;
arc, // phiLength,
0, // thetaStart
Math.PI / 2, // thetaLength
);
const mat = new THREE.MeshPhongMaterial();
mat.color.setHSL(amountSoFar / total, 1, 0.5);
const wedge = new THREE.Mesh(geo, mat);
offset.add(wedge);
const end = new THREE.CircleBufferGeometry(
1, // radius
16, // segments
Math.PI / 2, // thetaStart
Math.PI / 2, // thetaLength
);
const endMesh = new THREE.Mesh(end, mat);
endMesh.rotation.y = arc / 2;
offset.add(endMesh);
const end2 = new THREE.CircleBufferGeometry(
1, // radius
16, // segments
0, // thetaStart
Math.PI / 2, // thetaLength
);
const endMesh2 = new THREE.Mesh(end2, mat);
endMesh2.rotation.y = Math.PI - arc / 2;
offset.add(endMesh2);
const bottom = new THREE.CircleBufferGeometry(
1, // radius
32, // segments
Math.PI + -arc / 2, // thetaStart
arc, // thetaLength
);
const bottomMesh = new THREE.Mesh(bottom, mat);
bottomMesh.rotation.set(Math.PI / 2, 0, 0);
offset.add(bottomMesh);
return amountSoFar + amount;
}, 0);
function render(time) {
time *= 0.001;
cameraStick.rotation.y = time;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
</script>