Can someone guide me on creating a 3D model of a cylinder with a slice cut out using three.js? Something similar to this: Image
Your input is highly valued. Thank you.
Can someone guide me on creating a 3D model of a cylinder with a slice cut out using three.js? Something similar to this: Image
Your input is highly valued. Thank you.
To achieve the desired shape, one simple method is to extrude a THREE.Shape as shown below:
var settings = {
amount: 2,
steps : 1,
bevelEnabled: false,
curveSegments: 24
};
var shape = new THREE.Shape();
shape.moveTo( 0, 0 );
shape.absarc( 0, 0, 10, 0, Math.PI * 1.75, false );
shape.moveTo( 0, 0 );
var geometry = new THREE.ExtrudeGeometry( shape, settings );
Check it out on fiddle: http://jsfiddle.net/0yyg5ese/
Using three.js version r.73
To create a cylinder shape, you can utilize the THREE.CylinderGeometry and adjust the thetaLength parameter as needed. By default, it is set to 2 * Pi, resulting in a complete cylinder shape. I've developed a demonstration resembling your image: http://jsfiddle.net/hvgropoa/.
The only drawback is that the faces of the slice are absent, which allows visibility inside the cylinder when viewing the cut from within :( Nevertheless, this method is straightforward. If you require a closed cylinder, I recommend using THREE.CSG instead.
Upon further exploration, I was able to find a solution that worked perfectly for me.
// Constructing the shape
var cake_shape = new THREE.Shape();
// Starting from the center
cake_shape.lineTo( 0, 0 );
// Creating an ellipse
cake_shape.ellipse( 0, 0, 1, 1 , 0 , Math.PI * 1.75 );
// Returning to the center
cake_shape.lineTo( 0, 0 );
// Generating an extruded geometry using the previous shape and defining its
// depth (height of the cake)
var cake_geometry = new THREE.ExtrudeGeometry( cake_shape, { curveSegments: 10, depth: 0.5, bevelEnabled: true} );
let cake = new THREE.Mesh(cake_geometry, cake_material);
https://i.sstatic.net/n1Zrt.png
Trying other methods like creating a cylinderGeometry with an incomplete circle only results in a pie where the insides are visible, not achieving the desired effect usually.
Hopefully, this information will assist others who encounter the same issue in the future.
Currently working on an app that features a spherical panorama photo with a jpg size of around 4Mb. Throughout the development process, I find myself constantly refreshing the page to see changes and browsing through various three.js example pages for insp ...
I am attempting to retrieve JSON data from the Bing Search API. Here is what I have implemented: <!DOCTYPE html> <html> <body> <p id="demo"></p> <script language="JavaScript" type="text/javascript" src="jquery-1.12.3.js"& ...
Jumping into React to build an application seemed like a good idea at first, but now I realize the complexity of it. Let me walk you through my plan and see if it aligns with best practices: The goal is to develop a React App for organizing the subjects I ...
I've been working with the Physijs script for simulating physics, such as gravitation. I'm trying to use Raycaster from the THREE.js script to move objects within my scene. The issue I'm facing is that the Raycaster only moves objects (sim ...
Big shoutout to the amazing Stack Overflow community for always being there to help budding coders like myself! I've successfully implemented first-person camera movement in my project, allowing me to navigate forward, backward, sideways, and rotate ...
Having trouble getting $scope.watch to trigger... $scope.amountselected = 5; $scope.qtyselected = 1; $scope.$watch(['qtyselected'], function () { console.log($scope.availbleprecheckout); }); jQuery(document ...
Displaying a Checkbox Input <input id="idCheckbox" name="check" type="checkbox" value="AllValue" style="width: auto; height: auto; font-weight: bolder;" data-bind="checked: idCheckbox" /> The checkbox input will always have the value "AllValue ...
After installing the three.js plugin for Blender to export models to JSON format, I encountered some issues. When testing with a simple model that only contains colored materials (no textures), I received errors when choosing materials in the options (as s ...
I need help creating a confirmation dialog box for user action verification. Here's the situation: I have a table with multiple events, and users can choose to delete an event. This is how the table is structured: <tbody> <tr ng-repeat= ...
I am currently in the process of integrating Dropzone into my website. My goal is to capture the "success" event and extract specific information from the server response to add to a form on the same page as the DropZone once the upload is finished. The k ...
class SW { private startTime: number | Date private endTime: number | Date constructor() { this.startTime = 0, this.endTime = 0 } start() { this.startTime = new Date(); } stop() { this.endTim ...
Our content and design teams have a specific request to prevent paragraphs from ending with an "orphan word" - a single word on the last line of text that has wrapped onto multiple lines. The designer's proposed solution is to adjust the margins sligh ...
I am currently working with the following jQuery code: myFunc: function(cmd, obj){ var idToExtMap = this.map; var requireRes = this.reqInst; var deferreds = []; var ret = true; $.each(idToExtMap[cmd], function( ...
This is my first venture into React-Redux projects. I was under the impression that React only re-renders when a component's state changes. However, I am currently facing confusion. The component is being re-rendered every 1 to 3 seconds even thoug ...
Is it possible to utilize the babel client without the need for global installation? Instead of following this method npm install -g babel-cli I am looking to achieve the same outcome by using npm install babel-cli --save-dev ...
Currently, I am facing an issue while trying to use the state of a component in other components. Since this state needs to be accessed by multiple components, I have decided to switch to Redux. However, I encountered an error 'newUsers.push is not a ...
Currently, I am working on a web development project to enhance my skills. I am looking to incorporate a feature that changes the color of a clicked cell to a specific color. For a demonstration, you can view this link: https://jsfiddle.net/pz6tc3ae/30/ T ...
Is there a way to mock a response for an HTTP request in Cypress? Let me demonstrate my current code: Cypress.Commands.add("FakeLoginWithMsal", (userId) => { cy.intercept('**/oauth2/v2.0/token', (req) => { ...
I am currently working on developing a user-friendly date range picker that can be used to select dates from a drop-down menu and pass them to an SQL query. At this stage, I am focused on handling the selected date and displaying it in an h1 tag. Options ...
I endeavored to develop a small project aimed at monitoring flights passing over my vicinity. Utilizing the flight-radar24 API python package, I managed to extract the necessary data. Subsequently, I designed a systemd service to execute my python script ...