Generating a torus graph in three.js can be a visually stunning and

I'm attempting to design a unique torus graph showcasing different colored segments with varying widths based on data size, essentially a more visually appealing version of a pie chart.

Would it be feasible to achieve this using torus geometry, or would it be more advisable to create the segments as shapes and utilize extrudegeometry?

In either scenario, what approach would yield the best results?

Edit

I have managed to implement this using torus geometry as follows:

var prevAngle = 0;
for(var i = 0; i < data.length; i++){
    var mat = new THREE.MeshPhongmaterial({materialOptions});
    var angle = 2* Math.PI * data[i].size //size is decimal
    var geo = new THREE.TorusGeometry(500, 200, 8, 6, angle);
    var mesh = new THREE.Mesh(geo, mat);
    mesh.rotation.z = prevAngle;
    scene.add(mesh);
    prevAngle = angle;
}

However, upon rendering (with 4 objects in data each with size 0.25), I am only seeing the top half of the torus (or perhaps a semi-torus?).

Could the rotation be causing this issue?

Answer №1

For a practical example, check out the code available at this GitHub link

In the provided code snippet, pay attention to how the last parameter in the TorusGeometry function represents the arc value. This value allows you to map the segments of your pie chart directly to segments of a torus geometry.

Answer №2

Effective solution

let previousAngle = 0;
const materialType = new THREE.MeshBasicMaterial({materialOptions});
const container = new THREE.Object3D();
container.castShadow = true;

for(let count = 0; count < dataList.length; count++){
    const materialCopy = materialType.clone();
    materialCopy.color = new THREE.Color(this.colorList[count]); //colorList = ['#ffaabb', ...]

    let angleValue = 2 * Math.PI * dataList[count].size; //size is in decimal
    let geometry = new THREE.TorusGeometry(500, 200, 8, 6, angleValue);
    let meshObject = new THREE.Mesh(geometry, materialCopy);

    meshObject.rotation.z = previousAngle;
    container.add(meshObject);
    previousAngle += angleValue;
}
this.scene.add(container);

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

Using Node.js variables outside of a function

I've been facing issues with passing my trends variable from its function into a renderer for my Pug template. It's proving to be quite challenging. var express = require('express'); ...

Unable to save object in JavaScript memory

Currently, I am in the process of implementing a Stack in JavaScript using a LinkedList. However, I encountered an issue when trying to instantiate a Node class. When attempting to create a variable let newNode = new Node(x), I am receiving undefined. I a ...

Eliminating repeating entries in autocomplete results JSON

I am facing a challenge where I have integrated two feature classes, resulting in occasional duplication of results in the autosuggest feature. I am exploring options to detect and display alternatives instead of repeating the same result twice. Check out ...

Navigate a user upon completion of an update

My webpage requires users to click an update link, which triggers a process of fetching data from an API that takes a few minutes. I don't want users to have to constantly refresh the page to know when the process is complete and they can continue. Is ...

You have encountered an error: Uncaught TypeError - the function (intermediate value).findOne is not defined

Encountering an error when attempting to call the getStocks function from a Vue component. smileCalc: import User from "../models/user.js"; let userID = "62e6d96a51186be0ad2864f9"; let userStocks; async function getUserStocks() { ...

Employing global variables in JavaScript files with Vue3

In my Vue3 project, I have defined global variables like this: app.config.globalproperties.$locale = locale A composable function has been created to dynamically retrieve these global variables: import { getCurrentInstance ) from 'vue' export f ...

Jquery animate - callback is triggered before animation finishes running

Is there a way for the element to first expand in height and then apply a background image once the height change is complete? Currently, I am experiencing laggy performance as the background image is applied before the height animation finishes. Can som ...

How to dynamically populate a Vue multiple select dropdown with v-for loop?

I have been attempting to implement multi-select questions in Vue using v-for. The Select menu and its options are populated via JSON data. Unfortunately, I am facing difficulty in retrieving the selected results as expected. Whenever I select an option ...

Having difficulties including the Stack Overflow website within an iframe

I've been attempting to embed the Stack OverFlow website into an HTML page using an iFrame, but I'm running into some issues. Oddly, when I tried embedding my other two websites, they displayed correctly, but Stack OverFlow is not showing up on m ...

Having trouble accessing the Ajax "data" parameter in Twisted

An ajax request is made using the "POST" method with these parameters: function sendDataToServer(portNumber){ console.log(portNumber) $.ajax({url: "action", dataType : 'html', type: "POST", data: portN ...

Setting up Laravel with pjax

For the first time, I am experimenting with using pjax in combination with Laravel to enhance page loading speed. Since I am not well-acquainted with this technology yet, I have integrated this package into my project. Everything appears to be functioning ...

The componentDidMount lifecycle method of a rendered component in a Route is not being triggered

IMPORTANT: SOLUTION PROVIDED BELOW, NO NEED TO READ THROUGH THE QUESTION I am utilizing the following Router with react-router 4 return ( <Router> <Page> <Route exact path="/" component={HomePage} /> <Route path="/c ...

Problems with implementing JavaScript code in a WebView

I am currently working on an android WebView project where I have managed to change the background color to orange with this code snippet. @Override public void onPageFinished(WebView view, String url) { wv.loadUrl("jav ...

Modify and improve promise and promise.all using the async/await feature of ES2017

I have successfully implemented a photo upload handler, but I am now exploring how to integrate async await into my code. Below is the working version of my code using promises: onChangePhotos = (e) => { e.preventDefault() let files = e.target ...

Tips for running a function in CodeBehind triggered by jQuery?

In my Aspx code, I have the following: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebSite.View.Index" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> ...

Creating hyperlinks in JSON response from a REST API with AngularJS - A guide!

I have a web application built with AngularJS, JS, JQ, and HTML5. This app can send various HTTP methods to the project's RESTful Web Service and receive responses in JSON format. The response is structured like this: When displayed in a <pre> ...

What could be causing the show button to change its style every time I click it?

I'm a beginner in the world of JavaScript. I have been working on customizing the "show more" button and encountered an issue. I managed to add text and a down arrow below the button, but when I click it, another button labeled "I don't know how ...

Utilizing webpack for server-side development

I'm currently in the process of creating a node back-end service using express and I was thinking about incorporating webpack to bundle everything into a single file (although I'm not sure if this approach is correct as I'm still learning). ...

Stop YouTube Video in SlickJS Carousel, Remove Placeholder Image Forever

Feel free to check out the CodePen example: http://codepen.io/frankDraws/pen/RWgBBw Overview: This CodePen features an ad with a video carousel that utilizes SlickJS. There are a total of 3 YouTube videos included in the carousel, with the SlickJS ' ...

"What is the best way to access the value of a useState variable in ReactJS on a global

Below is my reactJS code snippet - useEffect(()=>{ const getinterviewerDetails= async ()=>{ const data1 = await axios.get("http://localhost:8083/api/GetProduct") .then(response => { console.log("role is " ...