"Challenges in Three.js: Solving Problems with Geometric Shapes and Internal

I'm trying to create a unique shape that resembles an open ring with squared edges instead of the traditional torus shape. I've experimented with using shapes and paths as holes in my design:

var arcShape = new THREE.Shape();   
arcShape.moveTo( 40, 0 );   
arcShape.arc( 0, 0, 40, 0, 2*Math.PI, false );  

var holePath = new THREE.Path();
holePath.moveTo( 30,0 )
holePath.arc( 0, 0, 30, 0, 2*Math.PI, true );

Currently, I have been able to create a mesh with this design by extruding it:

new THREE.Mesh( arcShape.extrude({ amount: 5, bevelEnabled: false }), MATERIAL );

However, I am now looking for a way to add a middle ring to this design. I have tried modifying the shape like this:

 var arcShape = new THREE.Shape();  
 arcShape.moveTo( 40, 0 );  
 arcShape.arc( 0, 0, 40, 0, Math.PI, false );   

 var holePath = new THREE.Path();
 holePath.moveTo( 30,0 );
 holePath.arc( 0, 0, 30, 0, Math.PI, true );

While this modification does create a middle ring, there is still a subtle face between the terminal parts. Is there a technique to make this design completely open as intended?

Answer №1

If you're looking to avoid starting over completely, consider adjusting the settings within the Torus geometry constructor:

// Customize Torus geometry parameters:
//     total radius of torus,
//     tube diameter (should be smaller than total radius), 
//     segments around the main radius, 
//     segments around the torus ("sides")
var customTorusGeom = new THREE.TorusGeometry( 25, 10, 4, 4 );

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

What is the best way to retrieve a specific value from a JSON file using a numerical identifier?

Imagine a scenario where there is a JSON file structured like this: { "data": [ { "id": "1", "name": "name1" }, { "id": "2", "name": "name2" } ] } If you know the ...

Running the JavaScript function '.hover' using Selenium WebDriver

My goal is to utilize Selenium WebDriver to run some javascript code from a webpage. I have come across several helpful posts on executing javascript, but I often struggle when trying to call javascript from page objects (I am still learning the terminolog ...

Develop a close button with toggle functionality

Is it possible to simplify the script below and create a toggle event with a close button? I am currently using this script on my website for listings, and I would like to implement a toggle functionality for multiple IDs. $("a.fmailto").click(function( ...

Get a webpage that generates a POST parameter through JavaScript and save it onto your device

After extensive research, I have hit a roadblock and desperately need help. My task involves downloading an HTML page by filling out a form with various data and submitting it to save the responses. Using Firebug, I can see that my data is sent over POST, ...

Oops! Looks like there was an issue: TypeError - 'app.use() function needs a middleware'

Recently delving into Node Js, I embarked on a learning journey and attempted the following code. However, it seems to be throwing an error that has left me stumped. Despite searching for solutions, I can't seem to pinpoint what's causing the iss ...

What is the most effective method for establishing a notification system?

My PHP-based CMS includes internal messaging functionality. While currently I can receive notifications for new messages upon page refresh, I am looking to implement real-time notifications similar to those on Facebook. What would be the most efficient ap ...

Effortlessly uploading large files using axios

I am currently facing an issue and I am seeking assistance. My goal is to implement file chunk upload using axios, where each chunk is sent to the server sequentially. However, the requests are not being sent in order as expected. Below is a snippet of m ...

Leveraging event listeners in conjunction with React's useEffect function

Check out the code example on Code Sandbox here Hey there, I'm trying to implement a feature where clicking a button inside a container displays a box. I've set up an event listener so that when you move your mouse outside the container, the box ...

How can the issue of the background fill option covering multiple loading bars be resolved?

I am currently relying on Google Translator, so there may be errors in the translation. The issue I am facing is that when I add a parameter with the "fillColor: '#f4f5f9'", the wheel covers one of the elements of Multiple Bars. I have modified ...

Changing the type of value in a React select onChange

<Select options={options} value={selectedBusinessList} isMulti placeholder="Select Business" onChange={(value: any) => setSelectedBusinessList(value)} onInputChange={query => { if ...

How can I generate pure JavaScript, without using Typescript modules?

Take this scenario as an example ... index.ts import { x } from "./other-funcs"; function y() { alert("test"); } x(y); other-funcs.ts import { z } from "some-module"; export function x(callback: () => void): void { z(); callback(); } ...

find the next earliest date in the array after the specified date

How can I find the smallest date in an array of dates that comes after a specific date? var datesArray = ['2019, 10, 4', '2019, 10, 13', '2019, 10, 8', '2019, 10, 6']; ownDate = '2019, 10, 05'; I need to ...

Understanding how objects are created using the reduce method

I'm curious about how the reduce function can transform an array into an object as shown in this example, particularly with the line: p[c[0]] = c[1]; Is this an unconventional syntax for creating key-value pairs that I haven't encountered before ...

Is it Possible to Remove an Item from an Array in Vue without Explicitly Knowing the Array's

I'm currently working on a feature that involves removing an item from an array when it is clicked. The code I have so far looks like this: <span @click="deleteItem(index)" v-for="(item, index) in customTaxonomies.featured" v-html="item"></s ...

Enhanced compatibility with Touch.radiusX feature on smartphone and tablet devices

Curious if anyone knows about the level of support for this property. I am currently using the PR0C0D1N6 app on an iPhone 4 and based on the specifications, when radiusX is not supported it should default to 1. However, in my case, radiusX is showing as un ...

Utilize THREE.js to manipulate and position individual instances of buffer geometries sourced from a loaded GLTF

I've managed to modify the example at this link in order to load a GLTF model and instantiate it as InstancedBufferGeometry. However, I'm having trouble accessing and adjusting the position for each instance. The setAttribute method doesn't ...

What is the best way to keep a Navbar fixed at the top of the page so that it stays in place as the user

Whenever I utilize... <div id="stay"> <%= render 'layouts/navbar' %> </div> #stay ul.TabNav { background: #FFFFFF; border-bottom:solid 2px #00E5EE; padding:0 0px; font-size:13px; overflow:hidden; ...

Unable to locate the Promise variable in iOS 7

iOS 7 Safari is displaying the error Can't find variable: Promise: new Promise(function(resolve, reject) { . . . While other browsers do not encounter this issue, I came across a similar question where Robert suggested using new Ember.RSVP.Promise i ...

Trouble with jQuery delay in updating the CSS attribute while using fadeIn

After writing a simple JQuery code, I noticed that every time I click on 'eat', the animation lags. Is there any way to preload this animation for smoother performance? The #custom_menu element is a full-page section with a fixed position (simil ...

Guide to extracting information from a database based on the button's input

On my webpage, I display detailed information about different types of food. There are two categories for the food items: Maincat and Subcat. Maincat Subcat Indian Food North Indian Food Indian Food South Indian F ...