Product sketching libraries in JavaScript

Can somebody assist me in locating a suitable JS library that is capable of generating a product sketch similar to this one: Partition sketch? I am currently using Next.js, and I am encountering difficulties with most libraries due to Next.js utilizing SSR while graphical libraries typically run on the client side. It is not necessary for the sketch to be displayed to the user; rather, it should just be a downloadable SVG file based on the user's input from the webpage.

Ideally, I would like it to be in PDF format so it can be directly sent to a customer, containing all the necessary information along with the sketch. Is this achievable?

I have experimented with Rhino3dm.js and P5.js, but found them challenging to integrate with Next.js.

javascriptnext.jsp5.jsrhino3dsketching

Answer №1

If you're looking to draw measurements and lines in p5.js, consider using the p5.svg renderer instead of canvas. This allows you to directly render to SVG, bypassing the .3dm format. While the library may not have recent updates, starting with an older version like this one can help you prototype what you need.

Alternatively, if .3dm is preferable, rhino3dm js library can handle drawing lines, curves, and text, as well as saving to .3dm format. Check out the SampleSketch2d live example here.

You can try running the same example below:

// JavaScript code here
// ...

In the provided example, clicking on the canvas creates a NURBS curve. Press 'Enter' to save and start a new one. The download button will be disabled until you have at least one saved curve.

For those who wish to use p5.js alongside rhino3dm, you can utilize p5's drawingContext to access the sketch's underlying Canvas render when not using the SVG renderer.

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

My form does not receive the Bootstrap classes when using the jQuery script

**Why isn't my jQuery script coloring the rows as expected when certain conditions are met (I italicized the specific part of the code)?** Here is the HTML CODE for the POLL: <form id="pollForm" class="mb-4"> <d ...

javascripthtmljquerycssbootstrap-5

substituting the deep watcher in Angular

In my application, I am working with a data object called fulldata, which consists of an array of objects. fulldata = [ {'key': 'abc', values: {.....},....}, {'key': 'efg', values: ...

javascriptangularjs

Exploring the crossroads of MongoDB, Mongoose, and Node.js: An in-depth look

Searching for ways to retrieve references in MongoDB using Node.js and Mongoose. After reading the documentation, I discovered that there are two options available: Manual References or DBRefs. Given that Manual References are recommended, I proceeded to ...

javascriptnode.jsmongodbreferencemongoose

Implementing restify on a website that mandates user login authentication

Currently, I am operating a REST API server using restify. In addition, my front-end consists of angularjs with html, css, and js files hosted on an Apache webserver. The next step is to implement user login authentication for this webapp. Access to the w ...

javascriptnode.jsauthenticationexpressrestify

Unleashing the y-axis and enabling infinite rotation in Three.js

In my three.js project, I am utilizing orbital controls. By default, the controls only allow rotation of 180 degrees along the y-axis. However, I would like to unlock this restriction so that I can rotate my camera infinitely along the y-axis. As someone ...

javascriptthree.js

Manipulating Strings in JavaScript

Hi there, I'm a beginner in JavaScript and I could really use some help with the following question. So, let's say I have this string: "AB_CD.1.23.3-609.7.8.EF_HI.XBXB" The numbers 1.23.3 and 609.7.8 are completely random with two dots separat ...

javascriptstring

Creating a class in JavaScript following an AJAX request

After receiving an AJAX response, the class "navtex-message" doesn't work properly when I create HTML with JavaScript. function formatNtxMessage( m ) { return '<div class="row">' + '<div class="col-lg-9">' ...

javascriptajax

Tips on how to retrieve the value of a number-type input within a custom attribute directive

I have successfully implemented this code in IE 11, but now we are looking to transition away from IE11 and address some of the issues that have arisen. <input type="number" evaluate-input="model.personalNumber" ng-model="model ...

javascriptangularjsangularjs-directive

Ways to distinguish if Dynamics XRM javascript is being triggered from the unified interface (UCI) or the traditional web-client interface

Is there an official way to determine if code is being called from the UCI or the legacy web-client? I see the function Xrm.Internal.isUci(), but since it's labeled as Internal, it may not be recommended for use. However, I still need a method to diff ...

javascriptdynamics-crmmicrosoft-dynamicsxrmdynamics-crm-uci

When a function is included in an object, it transforms into something other than a function

In my model, it looks like this: export default class UserObject { name: string; id: string; validateInsert() { } } If I interact with the model in this way: const modelUser: UserModel = new UserModel(); modelUser.ID = 1; modelUser ...

javascriptjsonangularresttypescript

Can someone guide me on how to make an array filled with dates using Javascript?

I am working on developing a Javascript code that can identify all the days leading up to the current date. Here is what I have managed so far: var titleArray = [ "title1", "title2", ]; var pictureArray = today.toString(); var thumbArray = today.toString ...

javascriptjqueryhtml

Could the long-term consequences of utilizing '--force' or '--legacy-peer-deps' be detrimental?

I'm currently working on a react-native project and encountering an error while trying to install the native-base library... npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-prote ...

javascriptreactjsreact-nativenpm

Choosing various data using Ajax

I am currently in the process of extracting various pieces of data from my insert.php page, including the post id, username, and user id. I intend to include other selected data as well. However, when trying to echo out multiple queries, all the informatio ...

phpjavascriptjqueryajax

How can I make Backbone.js execute a function following the creation of a Collection?

It seems like I may not be grasping the full picture here, but let me lay out my current understanding: I have a Model that holds 'all' the data (JSON retrieved from a single URL). This model contains one or more Collections which are populated ...

javascriptbackbone.jsbackbone-events

Exploring the Differences: NodeJS and ExpressJS for Server-Side and Client-Side HTML Rendering

Embarking on my journey with Node.js, I find myself grappling with the concept of server-side and client-side HTML pages. My objective is to hone my skills by creating an e-commerce web store. The technology stack that I have set my sights on includes Node ...

javascriptangularjsnode.jsexpress

Accessing JSON data and populating a dropdown menu with JQuery

I am facing an issue with extracting values from a JSON array using jQuery. The structure of the array is as follows: [{ "": "Select your State/Region" }, { "BAL": "Balkh" }, { "BAM": "Bamian" }] Although I have attempted to loop through the array in ord ...

javascriptjqueryjson

Validation of time picker consistently returns false

While using the daterangepicker library for my form validation with JavaScript, I encountered an issue with the time field. It returns false and displays an error message saying: "Please enter a valid time, between 00:00 and 23:59," preventing me from addi ...

javascriptjqueryhtml

AngularJS enables you to easily manipulate image width and height using the ng-file-upload feature

Seeking assistance with validating image width and height based on a 1:3 ratio prior to uploading using ng-file-upload. The validation should occur before sending the image to the server. Unsure how to retrieve the dimensions of the selected image for val ...

javascripthtmlangularjsng-file-upload

Preserving text input with line breaks in a MERN Stack application

Can you help with saving multiple paragraphs in MongoDB? I have a textarea where users can input multiple paragraphs, but the line space is not being saved correctly in the database. Here is how I want the submitted data to look: Lorem ipsum dolor sit am ...

javascriptreactjsexpressmongoosemern

Benefits of utilizing minified AngularJS versions (Exploring the advantages of angular.min.js over angular.js, along with the inclusion of angular.min.js.map)

After introducing angular.min.js into my project, I encountered a problem. http://localhost:8000/AngularProject/angular.min.js.map 404 (Not Found) angular.min.js.map:1 Upon further investigation, I discovered that including angular.min.js.map resolve ...

javascriptangularjsminifysource-maps