Adjusting the extrusion height in three.js: A beginner's guide

I have a trapezoid shape created with the code below. I am trying to extrude this geometry to a specific height of 2800, but I'm having trouble figuring out where to set the height parameter. Any suggestions on how to achieve this?

//Create Trapezoid Shape

var wallPoints = [[0,0,0],
                  [0,1000,0],
                  [-100,1100,0],
                  [-100,-100,0],
                  [0,0,0]];

var Vector3WallPoints = [];

for (var i=0;i<wallPoints.length;i++)
{ 
Vector3WallPoints.push(new THREE.Vector3(wallPoints[i][0],wallPoints[i][1],wallPoints[i][2]));
}

var wallShape = new THREE.Shape( Vector3WallPoints );

var extrusionSettings = {
    amount: 2800,
    //size: 300, height: 400, curveSegments: 3,
    //bevelThickness: 10, bevelSize: 20, bevelEnabled: false,
    material: 0, extrudeMaterial: 1, amount: 100,
    };

    var wallGeometry = new THREE.ExtrudeGeometry( wallShape, extrusionSettings );                           

    var materialFront = new THREE.MeshBasicMaterial( { color: 0xffffff } );
    var materialSide = new THREE.MeshBasicMaterial( { color: 0xff8800 } );
    var materialArray = [ materialFront, materialSide ];
    var wallMaterial = new THREE.MeshFaceMaterial(materialArray);

    var walls = new THREE.Mesh( wallGeometry, wallMaterial );

    scene.add(walls);

Answer №1

Having two declarations for amount in the same object can cause confusion and potentially override each other. To fix this, simply remove one of the duplicate declarations.

var settings = {
    name: "John",
    age: 30,
    amount: 500, 
    grade: "A", 
    amount: 600, // Instead of declaring 'amount' twice, choose which value you want to keep
};

If you are following the correct usage of the API, this adjustment should align with best practices.

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

Instructions on how to insert a single parenthesis into a string using Angular or another JavaScript function

Currently, I am employing Angular JS to handle the creation of a series of SQL test scripts. A JSON file holds various test scenarios, each scenario encompassing a set of projects to be tested: $scope.tests = [ { "Date": "12/31/2017", "Project": ...

Struggling with main content not properly overlapping with nav bar in HTML and CSS code

Looking for assistance with centering the main content area on a webpage both vertically and horizontally. After adding a CSS nav bar, scroll bars appeared on the page and the main div lost its center positioning, seeming to be shifted down and to the rig ...

Is there a way to implement a method on AirDatepicker within my custom JavaScript file?

I am currently working with AirDatepicker v3.3.5 in my app.js file: window.dateRangePicker = new AirDatepicker('.date-range', { range: true, maxDate: new Date(), multipleDatesSeparator: ' - ' }); After referring to the docu ...

The simple passport.js sign-up feature is not successful as it mistakenly believes that the username is already in

Currently, I am working on setting up a basic signup feature for my Node + Express + Sequelize application using passport.js. The database is empty at the moment, and I am utilizing the passport-local strategy to extract the user's email and password ...

What is the best way to make the current year the default selection in my Select control within Reactive Forms?

Hey there! I managed to create a select element that displays the current year, 5 years from the past, and 3 years from the future. But now I need to figure out how to make the current year the default selection using Reactive Forms. Any ideas on how to ac ...

Bring in the content to Notepad utilizing jQuery

How can I export data to Notepad? I have fields for Name, Age, and WorkingStatus that are input as text and textarea. Is there a demo or code available to help me insert this data into Notepad? ...

Tips for organizing checkboxes in rows horizontally

My question is related to this issue I am trying to arrange my checkboxes in 4 columns horizontally <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> ...

Issues with grunt - Alert: Task "ngAnnotate:dist" has encountered an error. Proceed using --force option

Encountering an unexpected issue with a Grunt task that previously ran smoothly. The error message is as follows: Running "ngAnnotate:dist" (ngAnnotate) task Generating ".tmp/concat/scripts/scripts.js" from: ".tmp/concat/scripts/scripts.js"...ERROR >& ...

How to Implement Infinite Scrolling in Ionic Framework Using HTTP Requests

Recently, I started using the amazing ionic framework and I am new to angular. I have a web service up and running, and my app is supposed to load data. I have succeeded in retrieving data, however, the WordPress rest API sends data in the form of pages. I ...

Error: The Next.js webpack module is missing in the npm local package

I'm currently developing a Next Js application that utilizes its mongoose models from a local npm package, allowing for shared functionality across different backend components. However, I am encountering the following errors: Module not found: Can&ap ...

Incorporating a .glb file into a React Native Expo application

I'm currently tackling a project that involves displaying 3D avatars in react native. However, I encountered an issue when trying to add my .glb model using GLTFLoader imported from three/examples/jsm/loaders/GLTFLoader, which resulted in a FileReader ...

What troubleshooting steps should I take to address MQTT issues affecting the rendering of my website while using React and Raspberry Pi?

I am facing an issue where I cannot integrate mqtt with my react application on a Raspberry Pi 4. I am seeking assistance to resolve this problem. My setup includes: Distributor ID: Raspbian Description: Raspbian GNU/Linux 11 (bullseye) Release: 11 ...

Remaining stationary as additional elements are inserted at the start of the div

I'm currently working on a chat page. Within this page, there is a div element that serves as the message container. As users scroll up, a request is sent to the server to retrieve older messages, which are then added to the beginning of the message c ...

Encountering an "Undefined index" error when attempting to send a file and path using FormData through

I have a question about my code. I am trying to send a file and a path to the server. The path needs to be constructed using these variables so that I can use it to output the file later on. var FD = new FormData(); var MyString = "uploads/docs/KEP" + m ...

Adding the same block of code to an event in Node.js: Best practices

My preferred tech stack for real-time user synchronization includes Node.Js with Express and Express HBS (Handlebars), as well as Socket.IO. For example, when creating a web chat application, I emit an event from the client to the server each time a user ...

Transferring TypeScript modules for browserifying

Recently, I transformed my canvas library from plain JavaScript to TypeScript. I have structured the code using classes, all of which are part of the cnvs module. However, I am facing difficulties in compiling these classes into a single file. My goal is ...

Issues arise when integrating Laravel routes with Vue Router

When attempting to invoke a Laravel route Route::get('/logout', 'Auth\LoginController@logout'); to log out the user and redirect to the login page, I encounter an issue. It seems like when trying to redirect to this URL, nothing ha ...

Comparing v-show(true/false) and replaceWith: Exploring the best practice between Vue and jQuery

Currently, I am in the process of learning vue.js and have a question regarding the best approach to implement the following scenario: https://i.sstatic.net/2YBEF.png https://i.sstatic.net/YCEHG.png The main query is whether it is acceptable in HTML to w ...

Is there a way to successfully integrate a JavaScript file that has been downloaded from `npm` or `yarn` into a web client or

Currently, I am following a guide titled "Headless Drupal with React" on Medium. The tutorial itself does not address my specific questions. In the tutorial, it demonstrates importing React and ReactDOM directly from CDN in the .html file. My query revolv ...

Calculate and retrieve the result from the event handling function

I need to capture a returned value and store it in a variable within an event handler function. Below is a sample code snippet demonstrating this: var xhr = new XMLHttpRequest(); function getData(e) { if (xhr.readyState === 4) { if (xhr.s ...