I am looking to enhance the dimensions of my shapes by utilizing the ExtrudeGeometry feature in Three.js. Can anyone provide guidance on

I am currently utilizing three.js to create a line in my project. However, I am facing an issue where the line appears flat like a paper, instead of a three-dimensional wall. I am struggling to increase the height of the line in my code.

Below is the code snippet I am working with:

var shape1 = new THREE.Shape();
shape1.moveTo(v1, v2);   
shape1.lineTo(v1, v2);     
shape1.bezierCurveTo(v1, v2, v3, v4, v5, v6);

var extrusionSettings = {
    curveSegments: 0,
    steps: 0,
    amount: 0,
    bevelEnabled: true,
    bevelThickness: height,
    bevelSize: 1,
    bevelSegments: 8,
    material: 0,
    extrudeMaterial: 1
};

var geometry1 = new THREE.ExtrudeGeometry(shape1, extrusionSettings);

With this code, I am able to render the line as shown in the attached image.

My objective now is to make this line appear as a wall. I am struggling to adjust the width using the extrusionSettings options. Changing the bevelSize results in a curved appearance, which is not what I want. How can I achieve the desired effect?

javascriptthree.jsheightgeometryshapes

Answer №1

If you take a look at the documentation on three.js regarding the ExtrudeGeometry feature, you will find that there is a parameter called amount that needs to be set to determine the depth.

Here is an example:

var extrudeSettings = {
    amount : 100,
    steps : 1,
    bevelEnabled : false,

    ...other settings...

};

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

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

Scale up the font size for all text on the website uniformly

Recently, I decided to switch a website's font to a non-web typeface. However, I quickly realized that the font was extremely thin and difficult to read. I attempted a simple CSS fix using * { font-size:125% }, but unfortunately, it did not have the d ...

javascriptjquerycssfontsfont-face

Please provide several input fields with identical 'name' attributes for submission

I'm encountering an issue with a form where multiple input fields (text) share the same name attribute. On the backend, I am utilizing node.js and Mongoose for a POST method. Below is a snippet of the code: if(existingFruit) { Fruit.findOneA ...

javascriptnode.jsformsmongoose

Perform subtraction operation between two arrays of objects in Javascript

Hey there, I could use some guidance on the best method for subtracting values between two arrays of objects. In my scenario (backend), I retrieve data on Products from mongodb, and I also fetch Trolley data from MySql. What I'm attempting to achieve ...

javascriptnode.jsarraysobject

Is this method an effective way to create global states across React components?

After delving deep into props-drilling while coding a full-fledged web application with React, I've decided to explore using React 'contexts'. Following the guidelines in the React documentation, I am implementing an approach to make my stat ...

javascriptnode.jsreactjsreact-hooksreact-context

Creating a dynamic HIIT program with an autoplay feature for videos and images, using a jQuery/JavaScript slider "playlist" with the backend support of

I am currently exploring the idea of developing a countdown timer that incorporates videos. In order for this timer to function effectively, it must be able to retrieve data such as countdown time, break time, number of sets, and video (or images if no vid ...

javascriptphpjquerymysql

Personalize the File upload with HTML and Javascript

https://jsfiddle.net/yugxqopz/ I'm new to the world of UI and have a simple request: 1) I want to upload a document using an "attach file" option 2) Once the file is selected, I want to automatically trigger a specific JavaScript function as shown ...

javascriptjqueryhtmlcss

Firebase Admin refuses to initialize on a Next.js application that has been deployed on Firebase

Currently, I am facing an issue while attempting to deploy a Next JS app to Firebase hosting using the web framework option provided by firebase-tools. The problem arises when trying to initialize firebase-admin as it seems to never properly initialize whe ...

javascriptfirebasenext.jsfirebase-hostingfirebase-admin

An item was shown on the HTML page

Having some trouble displaying the graph generated by my R function on the opencpu server. Instead of the desired plot, all I see is [object Object] in the HTML page. Below is the snippet of code from my AngularJS controller: var req = ocpu.rpc("plotGraph ...

javascriptjqueryangularjsropencpu

Generating an Xpath for the selected element with the help of Javascript or Jquery - here's how!

On my website, I have implemented a click event on an element. When a user clicks on this element, I want to generate the XPath of that particular element starting from either the html or body tag, also known as the Absolute Xpath. For example, if I click ...

javascriptjqueryhtmlxpath

Using jQuery to combine the values of text inputs and checkboxes into a single array or string

I need to combine three different types of items into a single comma-separated string or array, which I plan to use later in a URL. Is there a way to merge these three types of data together into one string or array? An existing POST string User input f ...

javascriptjquerystringcheckboxinput

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

javascripthtmlangulartypescriptjspdf

Using regular expressions in JavaScript, eliminate all characters preceding a specified final character

I am attempting to eliminate all text that precedes the last character in a Regex pattern. For example: rom.com/run/login.php Would turn into: login.php Can someone guide me on how to achieve this using JavaScript? I have limited experience with regul ...

javascriptnode.jsregexnpmsubstring

What is causing the search feature to malfunction on the Detail page?

In my project, I have different components for handling shows. The Shows.jsx component is responsible for rendering all the shows, while the ProductDetails component displays information about a single show. Additionally, there is a Search component which ...

javascriptreactjsredux

Exploring the synergies of Remark and Rehype plugins alongside MDX in Next.js powered by @next/mdx

I’ve been experimenting with Github Flavored Markdown using @next/mdx, but I’m struggling to understand how to use plugins alongside the code. Here’s a breakdown of what I’ve attempted so far: (I’m following the instructions from the Next.js Doc ...

javascriptreactjsnext.jsmarkdownmdxjs

Executing PHP to capture and showcase the HTTP request received from one page onto another

As a beginner in web development, I humbly ask for patience as I navigate through unfamiliar territory. If possible, please guide me through the logical steps necessary to accomplish the task at hand. I am currently working with PHP and need assistance i ...

javascriptphpajaxinventory

Can the browser doc mode be switched frequently?

My web application is built using AngularJS, but we also have a legacy web app that functions only in quirks mode and is included via an iframe on one of our pages. The challenge is to make this legacy app work within our main browser-based application, wh ...

javascripthtmlangularjsinternet-explorerinternet-explorer-8

What is the best way to test a try/catch block within a useEffect hook?

Hey, I'm currently dealing with the following code snippet: useEffect(() => { try { if (prop1 && prop2) { callThisFunction() } else { callThatFunction() } ...

javascriptreactjsjestjs

Tips for positioning and resizing images within a changing DIV dimension

My DIV element is adjusting its size based on the browser window. Inside this DIV, there is an image that should fill up the entire browser window without stretching out of proportion when the window dimensions change. In addition, I want the image to be ...

javascriptjqueryhtmlcss

Is it possible to include a submenu within a md-tooltip?

I have set up an md-tooltip for a sidebar, but I would like to enhance it by enabling a submenu option. For instance, if there is a Contacts submenu under the Profile menu, I want to be able to access Contacts when hovering over the Menu Icon. The tooltip ...

javascriptangularjstooltipangular-material

Shorten the content while preserving the HTML using JavaScript

When printing a string containing HTML links, I need to truncate the visible text while preserving the link structure. Simply using a substring method would disrupt the HTML tags in the string. I aim to display only 100 characters but also remove any inc ...

javascripthtmlsubstringtruncatesubstr