Tips for transforming a 2D path into a 3D form using Three.js

Can anyone help me achieve a 3D effect similar to this: http://jsfiddle.net/dAdKm/
I've tried using the following code:

var shape = new THREE.Shape();
shape.moveTo(20,20);
shape.bezierCurveTo(20, 100, 150, 100, 150, 20);
shape.moveTo(20,20);
shape.lineTo(20, 100);
shape.lineTo(150, 100);
shape.lineTo(150, 20);

var shape3d = shape.extrude(extrudeSettings);
var shapePoints = shape.createPointsGeometry();
var shapeSpacedPoints = shape.createSpacedPointsGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var shapeMesh = new THREE.Mesh(shape3d, material);

However, the result is not the same as the 2D context result. What could be causing this discrepancy?

Answer №1

The starting point for the shape is at coordinates (20, 20), it then moves to (150, 20) and finally returns back to (20, 20).

Instead of abruptly moving back to the starting point, consider defining the shape in a smoother way:

var customShape = new THREE.Shape();
customShape.moveTo(20, 20);
customShape.bezierCurveTo(20, 100, 150, 100, 150, 20);
customShape.lineTo(150, 100);
customShape.lineTo(20, 100);
customShape.moveTo(20, 20);

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

Interactive Vue components with dynamic children and sub-children

In my Vue application, I have a component called Address.vue which contains a child component called Contact.vue. One address can contain multiple components What I have accomplished: I have implemented the functionality in the Address.vue component t ...

Incorporating the id attribute into the FormControl element or its parent in Angular 7

I'm attempting to assign an id attribute to the first invalid form control upon form submission using Angular reactive forms. Here is my current component code: onSubmit() { if (this.form.invalid) { this.scrollToError(); } else { ...

Is there a way to execute a script in the parent window that affects the child window?

In my child.html, there is a button that can be clicked using the script $('[value="Submit"]').click();. I want to trigger this action from parent.html. Is it possible to do something like this: var popUp = window.open('https://child.html& ...

What could be causing my text mesh to resist rotating continuously?

Is there a way to make my text mesh rotate continuously, without being affected by the TrackballControls (mouse movements)? Currently, my mesh only rotates when I move the mouse. Can someone help me identify what's causing this issue? Here's the ...

JavaScript call embedded in a browser bookmark

Is it possible to include a JavaScript call within an HTML bookmark like this: <a href="bookmark">Go down</a> . . . <a name="down" href="javascript:alert('movedhere')"> When a visitor clicks on "Go down," the alert message app ...

Is the image overlay experiencing a flickering issue?

Last time, none of the solutions seemed to work quite right with the project, so let me try asking the question in a slightly different way this time. Basically, I have an image that, when someone hovers their mouse cursor over it, a div appears (containi ...

Using Tinymce 4.1.9 with raw ajax instead of JQuery: A step-by-step guide

I am currently working with Tinymice 4.1.9 for textarea validation in a raw ajax environment as I have limited knowledge of jquery. The issue I'm facing is that when Tinymce 4.1.9 is added to the textarea, upon validation, I receive an empty string un ...

Troubleshooting Vee-validate scope issues in Nuxt.js and Vuetify

I'm experiencing an issue with validation using vee-validate and Vuetify: I have two forms with different scopes, both being submitted within one function. While the validation is functioning correctly upon submission, the input errors are not displa ...

What is the best way to pass a variable and its corresponding state-updating function as a prop in a React component?

Considering I have a variable defined as follows: const [APIKey, setAPIKey] = useState([]) Is it possible to group these together into a single variable and then pass it as a prop? const passAPI = {APIKey, setAPIKey} Here is my approach to passing it alo ...

What is the best way to maintain the value of variables across different HTML files?

Imagine having a scenario where a page is connected to a .js file. This file contains code that assigns a value to a variable like this: var foo; function bar() { foo = //value generated through user input } bar(); Now the goal is to move t ...

Transfer Data from a Factory to a Controller in AngularJS

Although it may seem like a simple question, it has taken me nearly 3 hours to try and figure out what went wrong here. Perhaps someone could help identify the issue and provide a solution (it seems like an easy fix, but I'm just not seeing it). So, h ...

what is the mechanism behind __dirname in Node.js?

Node.js is a new technology for me and I recently discovered the "__dirname" feature which is really useful for obtaining the absolute path of the script. However, I am intrigued by how it works and how it manages to interpret the directory structure. De ...

What advantages does the static modifier offer when used with functions in TypeScript?

My journey with TypeScript has just begun, and while working in WebStorm, the IDE suggested using a static modifier... export default class MyClass { public bar(): any { // perform actions with instance values } private foo(a: any, b: ...

Converting a decimal Unicode to a string in Javascript/Node: a beginner's guide

In my database, I have Arabic sentences that contain decimal unicodes for quotation marks and other elements. For example, here is a sample text: "كريم نجار: تداعيات &#8220;كورونا&#8221; ستغير مستقبل سوق السي ...

How to retrieve a value from a getter in a different file using Node.js

Recently, during the creation of a node project, I defined a model as follows: export default class Tokens { constructor() { this.accessToken = ''; this.refreshToken = ''; } getAccessToken() { return ...

Can we refactor by using a distinct function?

I'm working on a table component that handles several columns in a similar way. I'm wondering if there is a more efficient way to optimize this code, perhaps by creating a separate function for it? import useTableStyles from 'admin/compo ...

What is the best way to structure a JSON object with keys that can change dynamically?

var data= [{_id: "5a93cbd49ae761a4015f6346", nombre: "Chicago - Missouri", longitud: "-94.6807924", latitud: "38.287606"}, { _id: "5a93ca539ae761a4015f6344", nombre: "Boston - Central Falss", longitud: "-71.4111895", latitud: "41.8902971"}, { _id: "5a93cc ...

The JSONP request connected to the user input field and button will only trigger a single time

Hello all, I'm new to this and have been searching the internet high and low to see if anyone has encountered a similar issue before, but haven't had any luck. I've been attempting to set up a JSONP request to Wikipedia that is connected to ...

Is it possible to declare language features in Typescript? For example, changing `!variable` to `no variable`

Can Typescript language features be declared within the app's source code? I want to enhance code clarity by implementing a small feature. Modified Null Test if (no userDetails) { // handle null } This new null test syntax is a little more conc ...

What is the easiest way to create a star pattern using JavaScript?

I attempted the following code but the output is incorrect! for(i=5;i>=1;i--) { for(j=i;j>=1;j--){ console.log(j); } console.log("\n"); } ...