Cube area to be filled

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.

Answer №1

Essentially, there's nothing too special here. I noticed something wasn't working as intended and made some fixes, added some filler, and included spinning just for entertainment purposes. Here is the code snippet:

<!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>
        /* CSS styles detailed below */
    </style>
</head>

<body>
    <input type="number" id="segmentInput" min="3" max="50" value="6">
    <button id="updateButton">Update</button>

    <script src="https://unpkg.com/three@0.128.2/dist/three.texttexture.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

    <script>
        // JavaScript functionality detailed below
    </script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node-red occasionally crashes and the JSON output may unexpectedly return HTML content

Having some trouble with my node-red crashing several times a day. I suspect that one of the issues may be related to an http request I am making. I'm trying to retrieve JSON data from a webpage, but sometimes I encounter errors in the log indicating ...

sanitizing user input in an AngularJS application

I created a feature in angular using ng-repeat <ul class="messages"> <li ng-repeat="e in enquiries"> <img src="/img/avatar.jpg" alt=""> <div> ...

How to Use jQuery in Thymeleaf to Toggle All Checkboxes

Why isn't the function of selecting and deselecting all fields working correctly for me? Can anyone explain what may be causing this issue? ..... <head> <meta name="viewport" content="width=device-width, initial-scale=1.0&q ...

What is the best way to configure maxSockets in Node.js while working with Express?

Can the maximum number of sockets in Node.js be adjusted while working with the Express framework? More information can be found here. ...

Can someone explain to me how I can customize the background of a bootstrap container?

Currently, I am working on an EJS login project and I have created a style.css file with the following code: [theme="bloodRed"] { background-color: #ff2424; color: #e571e1; accent-color: #00ff00; } In my register.ejs ...

Converting CommonJS default exports into named exports / Unable to load ES module

I've encountered an issue while creating a Discord bot with discord.js using TypeScript. When attempting to run the resulting JavaScript code, I'm facing an error that states: import { Client, FriendlyError, SQLiteProvider } from 'discord.js ...

Steps for converting an HTML form into a sophisticated JavaScript object

Is it possible to transform a form into a complex JavaScript object based on a structured form layout? I am not sure if there is a better way to accomplish this, but essentially what I am looking for is the following scenario: <form> <input n ...

Outputting messages to a component with React

I'm attempting to create a component similar to a console where messages are displayed one after the other instead of replacing the old message. My goal is to have a component where I can input strings, like in a chatbox, using different parts of my ...

Issues with Implementing Scroll Directive in Angular JS

Apologies for asking what may seem like a silly question. I'm still new to using AngularJS and recently came across a neat little scroll directive on http://jsfiddle.net/88TzF/622/. However, when I tried implementing the code in the HTML snippet below ...

Customizing Ext JS/Sencha Chart framework based on certain conditions

As someone who is new to Ext JS and Sencha charts, I have encountered a challenge with one of the charts in our application. Specifically, I needed to hide the dashes on the X-Axis of that particular chart. Our application is built using Ext JS version 5.1 ...

Can the z-index property be applied to the cursor?

Is it possible to control the z-index of the cursor using CSS or Javascript? It seems unlikely, but it would be interesting if it were possible. Imagine having buttons on a webpage and wanting to overlay a semi-transparent image on top of them for a cool ...

Changing the className of buttons based on user interaction

I'm looking to create a function in React JS that changes the button's color when clicked. Specifically, I want the color of the button to change upon clicking. I have attempted to achieve this using the following code: {"classname" i ...

Create a custom navigation bar using PlayFramework for a unique video streaming website

Attempting to create a dynamic navigation bar in Play using the code below in my main.scala.html file: @(title: String)(content: Html) <!DOCTYPE html> <html lang="en"> <head> <title>@title</title> <li ...

Spin an object around the global axis using the tween.js library

I'm trying to achieve a gradual rotation of a cube on the world axis using tween. Initially, I was able to rotate the cube around the world axis without tweening with the following code: rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeT ...

Issue with Passport Google Oauth login redirection to successful route

I am currently following a tutorial on setting up Google Oauth in my Express app using Passport.js. The tutorial can be found here. Below are the routes defined in my server.js file: // Code snippet here The server.js file also imports configurations fro ...

What could be the reason for the misalignment between md-menu and md-button when ng-href is included in the button?

Check out the demo by clicking here: http://codepen.io/audiodude/pen/vLyNvw The main distinction between the top and bottom sections lies in the fact that the top section utilizes an md-button with an ng-href attribute, which Angular Material compiles int ...

Problem arises when a recursive function call is nested within a request in an asynchronous setting

Currently, I am working on the task of finding a specific document path by providing its name as an argument. In the fetch_doc_path function, I am making two get requests to retrieve a JSON file containing information about all files. Subsequently, I recur ...

Difficulty in detecting state changes without refreshing the component when using Redux and React

I'm encountering difficulties detecting state changes from my Redux reducer in a React application. When I modify the state within one component, the other component in the app does not get the update unless the component is reloaded or refreshed. Let ...

Issues with loading images from a ThreeJs Json file in Three.js

I've got a threejs JSON object file that was created from an obj and mtl file using a Python converter. When attempting to load this js file, I'm utilizing the following code: loader = new THREE.JSONLoader(); loader.load('3bhk_1 ...

Can the order of React lifecycle events be reliably predicted across different components?

Is there a clear documentation on the guarantees of React lifecycle order across separate components? For instance, if I have: <div>{ x ? <A /> : <B /> }</div> When x changes from true to false, one component will unmount and the ...