I am struggling to fill a cube with colors as it is only getting half of the figure filled. I suspect there might be an issue with the cubeIndices, but I'm having trouble figuring out how to make it fill everything. While I know I could use a cylinder for this task, I am determined to solve it using lines as part of my algorithm learning process.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cube</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column-reverse;
color: rgb(43, 10, 74);
height: 99vh;
border: 3px solid black;
border-radius: 1em;
margin: 0 100px;
padding: 0 20px;
}
button {
font-size: 1.05em;
font-weight: 600;
margin: 1em;
transition: .5s;
border: 3px solid;
border-radius: .5em;
width: 200px;
height: 40px;
background-color: white;
}
button:hover {
background-color: rgb(12, 12, 12);
color: aliceblue;
}
input {
...
</style>
</head>
<body>
<input type="number" id="segmentInput" min="3" max="50" value="6">
<button id="updateButton">Update</button>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1165796374743f657469656574696564637451213f283f23">[email protected]</a>/dist/three.texttexture.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let scene, camera, renderer, axesHelper, cube, circle, circle2;
let segments = 6;
let rotationSpeed = 0.005;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(30, 500 / 500, 1, 500);
...
// The remaining code has been kept the same for continuity
I can't seem to identify the exact issue, being relatively new to working with this library.