Tips for correcting geometrical issues in Three.js

I'm currently working on translating geometry canvas2d commands from a separate library to three.js webgl output. I have taken one example and created a canvas2d output in one fiddle, as well as the corresponding three.js fiddle. The three.js output is not quite right, so I need to make adjustments to either the command-generating library or the three.js parameters themselves. Can someone please assist me in fixing this example?

Here is the canvas2d fiddle: https://jsfiddle.net/onifs/a1L87mhb/2/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

And here is the three.js fiddle: https://jsfiddle.net/onifs/s6xn0obu/13/

constructPathShape = new THREE.Shape();

Please click the "more" button several times to observe how the shape is constructed.

Thanks in advance!

javascriptthree.js

Answer №1

To start, make sure the main contour is fully drawn and then proceed to add details to the Shape.holes

If you need a stable version of your project, check out this fixed version on: https://jsfiddle.net/mmalex/6khnx2zy/

...
command[i++] = "constructPathShape.closePath();"; //main contour finished

command[i++] = "{ let hole = new THREE.Shape(); "
             + "  hole.autoClose = false; " 
             + "  constructPathShape.holes.push(hole); "
             + "  constructPathShape.holes[0].moveTo( -39.196, -59.186); "
             + "}";

// !!! IMPORTANT: focus on .holes[0] from now
command[i++] = "constructPathShape.holes[0].bezierCurveTo( -38.412,-47.08,-34.342,-37.412,-26.98,-30.181);";
command[i++] = "constructPathShape.holes[0].bezierCurveTo( -19.62,-22.952,-10.54,-19.337,0.261,-19.337);";
command[i++] = "constructPathShape.holes[0].bezierCurveTo( 12.194,-19.337,21.905,-23.867,29.397,-32.925);";
command[i++] = "constructPathShape.holes[0].bezierCurveTo( 34.274,-38.761,37.236,-47.515,38.282,-59.186);";
command[i++] = "constructPathShape.holes[0].lineTo( -39.196, -59.186);";

command[i++] = "constructPathShape.holes[0].closePath();";

command[i++] = " \/* we're done *\/ ;";

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

Answer №2

Just made some updates to the fiddle. No need to create any holes this time around! Using ShapePath(true) instead.

https://jsfiddle.net/onifs/s6xn0obu/32/ (scroll down a bit)

var simpleShapes = constructPathShape.toShapes( true );
    for ( var j = 0; j < simpleShapes.length; j ++ ) {
        var simpleShape = simpleShapes[ j ];
        var shape3d = new THREE.ExtrudeBufferGeometry( simpleShape, {
                depth: 2,
                bevelEnabled: false
        } );
        var material = new THREE.MeshLambertMaterial({
            color: 0xff8800
        });

        var mesh = new THREE.Mesh( shape3d, material );
        scene.add( mesh );
}

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

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

Utilizing the <style scoped> feature within my Angular template

When adding CSS styles in the specified htm file's templateUrl while loading a directive, I wonder if this is a bad idea. Will it be repeated every time the template is instantiated on the rendered page, or does Angular handle this differently? By usi ...

javascriptcssangularjs

Ensure the calling object is retained during the resolution of an Angular promise

Identifying the Issue One issue arises when resolving promises in Javascript: the context switches to Window #. This means that referring back to the object resolving the promise becomes tricky because I can't access or modify its variables. The com ...

javascriptangularjsangular-promise

Modifying the color of elements within a picture

I am in search of the perfect web technology or JavaScript library that can help me achieve a specific functionality. My aim is to change the colors of particular objects within an image. I am looking to create a tool where users can select a color, and th ...

javascriptphpjqueryhtml

There was an error in Index.js: The UserForm component did not return anything from the render function. This typically occurs when a return statement is missing. To render nothing, you can return

Hello, I'm a beginner with React and I'm attempting to add a row in my React app when a button is clicked. I referenced this guide on how to dynamically add and remove table rows in React.js However, I'm having trouble adapting it to my cod ...

javascriptreactjsreact-reduxmaterial-ui

What are the steps for creating a JSON array in JavaScript?

Hello, I'm facing an issue with the following code: javascript var cadena="["; $('.box').each(function(){ var clase=$(this).attr("class"); var id_t=$(this).attr("id"); if(clase=="box ...

javascriptjqueryarraysjsoneach

Phonegap - Retaining text data in a checklist app beyond app shutdown

This is my first time developing an app with Phonegap. I am looking to create a checklist feature where users can input items into an input field. However, I am struggling with figuring out how to save these items so that they remain in the checklist even ...

javascriptjqueryhtmlcsscordova

Engage in a conversation with a specific individual on the internet using node.js

Looking to implement a chat feature with specific online users similar to Facebook or Gmail using node.js and socket.io. Can anyone assist me with this? Thanks in advance! Client.html <html> <head> <title>My Chat App</title> <d ...

javascriptjqueryhtmlnode.jssocket.io

Syntax of the Vue.js application object model

Just delving into the world of vue.js and stumbled upon this code snippet. Curious to know more about its structure. const CounterApp = { data() { return { counter: 0 } }, mounted() { setInterval(() => { this.counter++ ...

javascriptvue.js

Incorrect scope value detected in Angular controller

I recently started learning Angular 1, and I've encountered an issue with my code: var app = angular.module("Football", []); app.factory("competitions", ['$http', function($http) { return $http.get("json/competitions.json") .success(fu ...

javascriptangularjsangularjs-factory

Issue: React error message indicates that the .map() function is not recognized. The API response is in the form of an object, making

As a newcomer to REACT.JS, I am currently facing the challenge of extracting data from an API for my project. Utilizing "Axios" for sending the get request, I have encountered a situation where the response comes back as an array in one API and as an objec ...

javascriptreactjsfrontend

Tips on when to display the "Email Confirmation" input text box only after updating the old email

Oh no!! Yes, that's exactly what I desire! I've been facing obstacles in trying to understand how to display the "Email Confirm" input text-box ONLY when the old email has been updated. Can someone point out where I might have gone wrong? :( ...

javascriptphpjquerylaravel

Ways to obtain data in JavaScript function from HTML

Struggling to pass the key from a database query in HTML using PHP to a JavaScript function? You're not alone. The challenge lies in passing the field_id to the updateRecords() JS function through the onClick() event of an HTML button. Previously, se ...

javascriptphphtmlajax

One issue that may arise is when attempting to use ngOnDestroy in Angular components while rearranging user transitions

Encountered an issue recently with Angular - when the user navigates from component A to component B, component A remains active unless ngOnDestroy is triggered. However, if the user visits component B before going to component A and then leaves, ngOnDes ...

javascriptangularangularjstypescript

Add various inputs to a table using JavaScript

I came across a situation where I needed to append lines into a table in a specific way. However, I encountered an issue with JavaScript not accepting any input type='text' for an unknown reason. When I used a normal text variable, it worked fine ...

javascriptphpjquery

Exploring Vue.js: Leveraging v-bind for multiple classes in Vue.js applications

Can someone assist me in figuring out how to apply multiple options to v-bind:class? In my Uno game, I need to determine the text color of cards based on their color property stored as a list of objects like this: ([{ Color: green, Value: 6}]. Here is my ...

javascripthtmlvue.jsvuejs2vue-component

Activate the places_changed event in Google Maps by clicking the submit button

I would like to activate my placed_changed function when a submit button is clicked. Here's what I have so far: I've set up a searchbox using google.maps.places.SearchBox, and when I press enter while the search box is in focus, it triggers the e ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Unexpected behavior is being encountered with the else statement, and there are compatibility issues with IE and Mozilla Browser in the overall script

Script is functioning as expected in Google Chrome, but is not responsive in IE and Mozilla browsers JavaScript code: <script src="jquery.min.js"></script> <script> function Run() { if(jQuery('#inputtext').val() == '0 ...

javascriptjqueryhtml

The outcome of the JQuery function did not meet the anticipated result

Here is the code I am using: $("p").css("background-color", "yellow"); alert( $("p").css("background-color")); The alert is showing undefined instead of the expected color value. I have tested this code on both Google Chrome and Firefox. Strangely, it w ...

javascriptjqueryhtmlcss

Fetching data from MongoDB, loading over 3000 entries and implementing pagination

I'm facing a challenge where I need to display more than 3000 results in an HTML table by fetching MachineID, Username, and Data from my MongoDB. However, I am encountering difficulties when trying to render this data using datatables. The MachineID ...

javascriptjavanode.jstypescriptmongodb

Leverage the JSON data to populate the category axis in c3.js

I have a JSON object that contains an array called datas, which holds the data I need to use for my chart. I want to utilize the data1 array for the x-axis in a category format. How can I achieve this? This is my attempted solution, where I extract the da ...

javascriptjsonc3.js