I have successfully created a pie chart object using 3js ExtrudeGeometry. However, my current goal is to move out a slice from the piechart object, similar to the illustration in the image below.
https://i.sstatic.net/DRx7M.jpg
Below is the code snippet that I have implemented for this task.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/Detector.js" type="text/javascript"></script>
<script src="js/renderers/CanvasRenderer.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
var container, scene, camera, renderer, controls;
var segments = [];
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(5, 10, -10);
scene.add(camera);
var dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(100, 100, 100);
camera.add(dirLight);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var i;
var startAngle=0;
var color="blue";
for(i=0;i<4;i++){
var smallSegment=createSegment(1, THREE.Math.degToRad(startAngle) ,THREE.Math.degToRad(startAngle+90), color);
if(color=="blue"){
color="red"
}else{
color="blue"
}
startAngle=startAngle+90;
scene.add(smallSegment);
segments.push(smallSegment);
}
//segments[0].position.x=segments[0].position.x+0.5;
//segments[1].position.x=segments[1].position.x+0.5;
//segments[2].position.x=segments[2].position.x+0.5;
segments[3].position.x=segments[3].position.x+0.5;
}
function createSegment(radius, angleStart, angleEnd, color) {
var extrOpt = {
curveSegments: 32,
steps: 1,
amount: 0.1,
bevelEnabled: false,
};
var Shape = new THREE.Shape();
Shape.moveTo(0, 0);
Shape.absarc(0, 0, radius, angleStart, angleEnd, false);
Shape.lineTo(0, 0);
var SegmentGeom = new THREE.ExtrudeGeometry( Shape, extrOpt );
SegmentGeom.rotateX(-Math.PI / 2);
var SegmentMat = new THREE.MeshLambertMaterial({
color: color
});
var Segment = new THREE.Mesh(SegmentGeom, SegmentMat);
return Segment;
}
function animate() {
var time = new Date() * 0.001;
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
In my attempts to modify the x-position of the slices for movement, I encountered issues with overlapping when translating them. As illustrated in the images linked below:
https://i.sstatic.net/zC0XZ.jpg
https://i.sstatic.net/U59n6.jpg
I am seeking solutions or advice on how to achieve the desired slice movement without encountering overlap problems. Any help would be greatly appreciated!