What is the best way to create a linear swept face in three.js?

Is there a way to create a linear swept face with code?

I have written the following code:

      // defining the profile
      var points = [
        new THREE.Vector2(0, 0), 
        new THREE.Vector2(10, 0), 
        new THREE.Vector2(10, 10), 
        new THREE.Vector2(20, 10), 
        new THREE.Vector2(20, 20),
      ];
      var shape_profile = new THREE.Shape(points);
      // creating the path
      var sweep_path = new THREE.LineCurve3(new THREE.Vector3(0, 0, 0), new THREE.Vector3(30, 0, 30));
      var extrusion_geometry = new THREE.ExtrudeGeometry(shape_profile , { steps: 1, bevelEnabled: false, extrudePath: sweep_path });
      var quality_material = new THREE.MeshLambertMaterial({ color: 0xff8000, wireframe: false });
      var result_mesh = new THREE.Mesh(extrusion_geometry, quality_material);
      scene.add(result_mesh);

After running this code, I obtained the following result:

https://i.sstatic.net/s0lQy.jpg

However, the output does not match my desired outcome. My goal is to achieve something like this:

https://i.sstatic.net/tcDgw.jpg

What could be causing the discrepancy in results?

Answer №1

If you're looking to accomplish this, consider using THREE.ExtrudeGeometry.

For further guidance and inspiration, check out the array of examples available on the three.js examples page:

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

Leveraging $this in conjunction with a jQuery plugin

I'm experimenting with a code snippet to reverse the even text in an unordered list: $(document).ready(function () { $.fn.reverseText = function () { var x = this.text(); var y = ""; for (var i = x.length - 1; i >= 0; ...

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

Guide on adding user input values (type=text) into HTML using JavaScript function outcome

I'm looking for a way to use the output of a JavaScript function as the value for an input field in HTML. Currently, I have a JavaScript function that generates a random string: function generateRandomString(length) { let result = ''; ...

JQuery - Issue: Invalid syntax detected in the expression: #

I'm facing an issue with some tabs inside an accordion that don't seem to be functioning properly. The console is showing the following error: Error: Syntax error, unrecognized expression: # Despite searching for a solution online, I can&apos ...

Switch between various div elements

Looking for a way to toggle between different divs? Here's the scenario: You have a sidebar with a set of buttons. Upon entering the page, you only want the div containing the button group to be visible. However, when a specific button (e.g. Info) is ...

The catch-all route handler is triggered following a response being sent by a designated route handler

Currently, I am facing a peculiar issue with the routing on my Express-based server while trying to implement authentication. Here's a snippet of code that highlights the problem: app.get('/', function (req, res) { console.log('thi ...

Is there a way for me to discover the top trending photos on Instagram today?

Finding information on the Instagram API can be quite challenging due to poor documentation. Is there a method available to discover the most liked Instagram photos by location, such as identifying the top picture liked by Danish users today? Any insight ...

Modifying the default label for each bubble on a bubble chart with chartjs-plugin-datalabels

Is there a way to add labels to each bubble in the bubble chart using chartjs-plugin-datalabels? For every bubble, I'd like to display the label property of each object within the data.dataset array, such as "Grapefruit" or "Lime". Currently, I'm ...

In Javascript, the difference between defining a variable using "this.varName" and "var varName" lies in the scope of the variable

Excuse my JS ignorance, but here's a question: In JS, I've noticed functions that define variables inside them like this: function functionName(){ this.something = ""; }; I'm wondering if something is considered a local variable. W ...

Modify the value of select options when the page is first loaded

I want to set up a dropdown menu with a list of regions, and I need the drop down to automatically select an option based on the variable value that I assign. Here is the code snippet. <select name="_sft_location[]" class="sf-input-select" title=""&g ...

What could be causing textbox2's value to not update when textbox1's value is changed? (Novice)

I am looking to create an interactive form with two textboxes and a checkbox. When the checkbox is checked, I want the value of textbox2 to mirror whatever is typed into textbox1. Is there a way to have the value of textbox2 automatically updated when the ...

Looking for a way to update template variables in copy using grunt?

I am currently utilizing load-grunt-config along with grunt-contrib-copy. My objective is to have the copy task replace certain template tags using the 'process' option. I understand that replacing template tags is feasible based on the grunt-co ...

Having difficulty with a timing feature in a React application

As I develop a game in React, I am currently working on implementing a timer for it. Below is the code snippet for the main game component: import React, {Component} from 'react'; import './Game.css'; import ScoreBoard from '../Sc ...

Enhance design based on scrolling function in React

I've been trying to update the color of my header when a user scrolls the page, but for some reason, my onScroll method isn't working. Can anyone help me figure out why and how to solve this issue? The onScroll method is triggered by the bottom T ...

Steps for adding an item to the datasource in a Kendo UI Combobox manually

I am facing an issue with a combobox that is being populated using a JSON string received from a servlet. $(document).ready(function() { //Combobox Init (From Servlet) var comboBoxDataSource = new kendo.data.DataSource({ transport : { ...

JavaScript functions do not work within the HTML code

I am currently working on my debut website and I'm facing an issue with the JavaScript file not functioning properly. Is there a chance you can help me troubleshoot this? I'm still in the learning stages of programming. This is the HTML content ...

"Utilizing ng-select with ng-model: A Step-by-Step Guide

Currently, I am working on a code that involves using ng-repeat to loop through options. My goal is to utilize ng-select to choose a value based on a specific condition. However, according to the AngularJS documentation: ngSelected does not interact wit ...

The method for retrieving a generic type property within a dynamic interface

Is there a way to access a dynamic T property within an interface in order to enhance its typing for generic functions like this: type AnotherType<T extends {}> = T & { prop: boolean; prop2: string; }; interface SpecialInterface<T> ...

Using the push method will transform an array into a numerical value stored in the component's state

Within my component's state, I have an array of numbers that I am experimenting with by attempting to add another number using setState within a timer set in the componentDidMount method. My goal is to observe how this addition affects the display on ...

Issue TS8011 in Angular 6 is related to the restriction on using type arguments only in files with the .ts extension

I have a project in Angular 6 where I need to integrate a JS library. This library is confidential, so I can't disclose its details. The problem I'm facing is that the TypeScript compiler seems to misinterpret characters like <<24>>, ...