What is causing the incorrect depth or height in the output of extrudeGeometry?

I am attempting to convert my 2D shape into a 3D shape using extrudeGeometry, but the resulting height is not as expected. The mesh seems to have an unusually high z-depth. Below is the code snippet I am using:

const geoPoints = [];

geoPoints.push(new THREE.Vector2(1, 1));
geoPoints.push(new THREE.Vector2(-1, 1));
geoPoints.push(new THREE.Vector2(-1, -1));
geoPoints.push(new THREE.Vector2(1, -1));

const geoPointsShape = new THREE.Shape(geoPoints);
const californiaGeo = new THREE.ShapeGeometry(californiaShape);
const extrudeSettings = {
  steps: 1,
  depth: 0.1,
  bevelEnabled: false,
};

const extrude = new THREE.ExtrudeGeometry(geoPointsShape, extrudeSettings);

const calMesh = new THREE.Mesh(extrude, globalMaterial);

https://i.sstatic.net/JW1tU.png

Answer №1

Resolved the issue by:

  let shapeSettings = {
      depth: 5,
      bevelEnabled: true,
    };

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

Convert a JSON array into a new format

Here is the JSON data input provided: "rows": [ [ 1, "GESTORE_PRATICHE", 1, "GESTORE PRATICHE", "canViewFolderManagement" ], [ 2, "ADM ...

Issue arises while utilizing the echoed ++$value in javascript within a webpage containing an HTML5 audio player

I've been developing a customized 'soundboard' that generates a unique HTML5 audio player for each mp3 file found in a directory. While the player setup is functioning as expected, I encountered challenges when incorporating a customized tim ...

Redis data retrieval is successful on the second attempt

I am utilizing a Redis database along with express routing to create an API. My stack includes node.js and ioredis as well. The process involves connecting to Redis, fetching keys related to a specific date, and then retrieving the data associated with th ...

Angular's minimum date validation is not accurate for dates prior to the year 1901

Any assistance or clarification on this matter would be greatly appreciated. It appears that there may be an issue with my implementation, as otherwise it seems like a significant bug within Angular. Setup Create a form with a minimum date of 0001-01-01 ...

How come these functions continue to be executed asynchronously even when the Async module is being utilized?

My decision to utilize the Async module aimed at populating a mongodb collection according to a specific order proved to be quite challenging. Despite the fact that the code worked without Async, it failed to insert documents in the desired sequence: func ...

Creating a dual-column checkbox design with CSS only

I'm working with a dynamically generated form element that can only be styled using CSS. I need help achieving a specific layout without making any HTML changes, except for the classes. The "element" and "formField" classes are common and cannot be mo ...

Second question regarding the conversion of an Excel spreadsheet formula into JavaScript code

Hey everyone, I'm back again with another challenge. This time, I'm struggling to accurately translate an Excel Spreadsheet formula to JavaScript. Here is the Excel formula: =IF(IF($B$7=TRUE,$B$28/$B$10,$B$28/$B$5)>1,1,IF($B$7=TRUE,$B$28/$B ...

What methods would you use to test a Vanilla JS Ajax call handled by a Promise using Jasmine?

I recently came across a great solution on How to make an AJAX call without jQuery? that I wanted to implement. However, I found it challenging to mock the Promise, the AJAX call, or both in my testing. My initial attempt with jasmine-ajax didn't wor ...

Including 2D text onto a cube using elements from an array. Countless items

I have developed a script that generates approximately 10,000 boxes using the following code: var c=[]; c.push([13,0,3021,98,'01391A']); c.push([13,102,3021,98,'01391W']); c.push([13,204,3021,98,'01391Y']); c.push([13,306,302 ...

Format for storing data using JSON tree structure

Considering how to efficiently store and update data for a tree, let's think about a common scenario like a virtual dom in React. One way to store a tree representing a dom in JSON format could look like this: { nodeId: 'nodeId1', ...n ...

Firefox has a bug when inserting an unordered list

I'm currently in the process of creating a WYSIWYG editor and I am focusing on incorporating unordered lists. I am utilizing document.execCommand('insertUnorderedList') for this functionality. Check out the demo below: div[contenteditable ...

Access php variable within JavaScript

My current project involves mostly PHP coding, but there is one function that requires me to use JavaScript. The challenge I'm facing is figuring out how to access a PHP variable within my JavaScript code. Here is the snippet I have placed between the ...

Creating the Apk file for your sencha touch application

Hello there! I'm diving into the world of Sencha Touch as a new user. After installing all the required tools and SDK, I successfully set up the demo example that came with project creation via command line. Now, I'm eager to generate the APK fil ...

How can I add a parameter to a JSON URL in Angular?

I'm looking to enhance my URL by adding a new parameter, but I'm unsure of the steps needed. ts.file route(name:string) { this.router.navigate(['/homepage', (name)]); console.log('name); } service private url1 = './assets/ ...

Limiting functional component re-renders to only occur when certain states change

Is there a way to make a component re-render only when a specific state in that component changes, instead of re-rendering with every state change? Here is an example code snippet: suppose I have a component with three states and I want it to re-render on ...

The value of an object is replaced when a general method is called for the second time

I seem to be missing a fundamental concept in programming as I am encountering an unusual issue that I have never faced before. Let me illustrate my problem through this code snippet: var result = {abc: 10, cde: 20, efg: 30}; var final_result = {}; var c ...

Stop displaying AJAX requests in the console tab of Firebug, similar to how Twitter does it

I'm looking for a way to prevent my AJAX calls from being logged in Firebug's Console tab, similar to how Twitter does it. When using Twitter search, you'll see a live update feed showing "5 tweets since you searched." Twitter sends periodic ...

Tips for building a geometric shape using an array in JavaScript and Three.js

What is the most efficient method for transforming this data array into a geometry? I am generating the array dynamically and have the option to create an object instead of an array. Any suggestions for improving this process would be greatly appreciated. ...

Adjusting ng-required in AngularJS for both empty values and -1

When an empty value or -1 is selected in my form, it should display an error message saying "This field is required". I have explored two possible solutions: 1. Using ng-required with regular expression. 2. Writing ctrl.$validators.required in the dir ...

acquire information using ajax in conjunction with jquery

I am currently working with the following code: <div data-role="content"> <div data-role="content"> <form id="registerForm" action="/register" method="post" data-ajax="false" class="ui-body ui-body-a ui-corner-al ...