Using JavaScript to showcase computer-aided design (CAD) visuals

After spending a few days searching, I've decided to reach out here for help with displaying 3D images (CAD images) on a website using only javascript.

I am specifically looking to display .stp or .igs formats and allow users to interact with them.

While researching, I have come across a few frameworks:

https://github.com/tbuser/thingiview.js

https://github.com/humu2009/jsc3d

However, they either are outdated or do not support the formats I mentioned earlier.

Has anyone encountered a similar issue and can offer advice on how to proceed?

Another idea I had was to extract jpg images from the aforementioned formats and use a 360 image view plugin like:

(to name a couple)

Pros:

  • Faster loading times
  • Easier implementation

Cons:

  • Need to convert to jpg
  • More challenging to implement
  • Outdated frameworks (except Three.js)

Note: I do not require any advanced interactions with the image such as going inside it, making it transparent, or exploding it. I simply need to display it as a 360 picture.

If you have a solution for this scenario, please share your thoughts.

Any feedback would be greatly appreciated. Thank you in advance,

André

javascript3dthree.js

Answer №1

When it comes to CAD formats like Step and IGES, they are commonly used in 3D development for webgl, particularly in game development. However, these formats are different from traditional polygonal models, requiring a geometric solver back end known as a CAD kernel for proper visualization. This means that a basic 3D framework may not suffice for handling these types of files, as they fall on the more complex side of 3D modeling.

STEP, in particular, is notoriously difficult to work with due to its complexity, even with the use of a CAD kernel. For converting CAD data into polygons for display, tools like opencascade can be helpful, although free B-Rep backends are scarce.

Another option is to utilize existing CAD applications for this task, as finding a purely JavaScript-based CAD kernel may be challenging.

Unlike typical polygonal 3D models, B-Rep models focus on the mathematical shapes' interconnections rather than polygons. Therefore, solving a Step or IGES file requires a deeper understanding of these mathematical structures. Resources like this guide can be useful for getting started.

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

Retrieve the JSON object's name and loop through its child objects

Just diving into JavaScript and web development, seeking some guidance. I'm currently working on gathering information to format and trigger another request. Here's what I have so far: JavaScript $( document ).ready(function(sb_shows) { $. ...

javascriptjsonjquerygetjson

The installation process with Npm seems to be dragging and I'm seeing a significant number of "cache misses" for almost every library

Everything seems to be functioning smoothly on my local computer. However, when I run nodejs inside a docker container (docker run node:18) and clone a project, the process of typing npm install to download all libraries becomes extremely slow. It takes ar ...

javascriptnode.jsdockernpm

Is it possible to execute MySQL queries in the form of Javascript using Reactjs?

I'm currently working on a database project that involves using Javascript with React, Node, and MySQL. I have been trying to figure out if there's a way to execute MySQL queries through a form submission. For example, being able to type in a que ...

javascriptmysqlnode.jsreactjs

How to open a new window in a separate desktop on macOS using Javascript

I am currently browsing my website on a Mac computer. I am interested in opening a new tab on the second desktop using Mission Control. Is this achievable? If so, could you please guide me on how to do it? After searching extensively online, I have been u ...

javascripthtmlmacos

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

javascripthtmljquerycssdom

Attempting to grasp the intricacies of HTML5/JS video playback quality

I've been diving deep into research on this topic, but I can't seem to find a straightforward answer to my specific query. My main focus is understanding the inner workings of how video players transition between different quality settings (480p, ...

javascripthtmlvideovideo-streaming

Can we separate city, state, and country data into individual input fields using Autocomplete and Geonames?

Currently, I have a single INPUT field set up to trigger the jQuery UI Autocomplete function, which pulls data from Geonames API. $( "#city_state_country" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http ...

javascriptjqueryjsonautocompletegeonames

Issue with Angular.js mobile browser app causing freeze on iOS 8 Safari

Our Angular.js Web App is experiencing occasional freezing on iOS8 Safari. When the freeze occurs, the ng-click callback fails to trigger. Interestingly, replacing ng-click with a standard javascript onclick resolves the issue. It's worth noting that ...

javascriptiosangularjssafarifreeze

Ensure all keys in a Javascript JSON object are checked for undefined or null values, and assign default values if necessary

After just two days of learning JavaScript, I find myself a bit ahead of the game in what I'm trying to accomplish. I have a JSON array that I use to update content on my webpage. However, I've encountered a problem where if an empty ('null& ...

javascriptarraysjsonnullundefined

Obtain user input from a form and assign it to a variable in a jQuery AJAX

How can I pass the value of an HTML Input Form to a jQuery AJAX call's URL as `amt` in `url: "http://localhost:8080/orderNo?amount=" + amt,`? The input value logs to the console when calling getAmtValue(), but I'm struggling to access the `amt` ...

javascriptjqueryhtmlajax

Updates to the deprecated $http success function in Angular have been made

Currently, I am following a book that guides me through creating an App using the MEAN stack. However, I have encountered an issue where the code provided in the book is based on an outdated version of Angular that still includes the $http success method. ...

javascriptangularjsnode.js

Guide on triggering CSS @keyframes animations upon element visibility while scrolling

I'm struggling with controlling CSS animations that I want to start only when the element becomes visible on the screen. The issue arises because I have a website with a total height of around 8000px and the element with the animation is located far d ...

javascriptjqueryhtmlcss

The slides on SlickJS are initially loaded in a vertical alignment, but once the arrows are interacted with,

I've put together a demonstration that highlights the issue I'm facing. Upon visiting the contact section, you'll notice that all the slickJS slides are stacked vertically initially, but once you interact with them by clicking on the arrow o ...

javascripthtmlcssbootstrap-4slick.js

Unlocking the secrets of obtaining post values using Body-parser in your Express Node.js application

Currently, I am utilizing Express version 4.11.1 and Body-parser version 1.11.0 in my project. However, upon running the code snippet below, I encountered the following output: I am seeking suggestions on how to retrieve the form value. Output {} serve ...

javascriptnode.jsexpressbody-parser

How to Calculate the Time Interval Between Two CORS Requests Using jQuery AJAX

When using jQuery's $.ajax to make a CORS request to a web service, there is typically a pre-flight request followed by the actual POST request. I have observed that when there is a time gap between making two web service calls, both a pre-flight and ...

javascriptjqueryajaxgoogle-chromehttp

Discover the best practices for utilizing CSS selectors reliably in puppeteer

For a project, I am currently working on customizing a puppeteer script that is able to play a song from Soundcloud and record it. The main goal is to utilize a CSS selector to display the duration of the song as well. I am encountering difficulties with g ...

javascriptnode.jscss-selectorspuppeteer

The failure to parse an object in response to a JavaScript AJAX call

Why am I getting undefined in the console? Javascript code: var url = "/SitePages/AlertsHandler.aspx/GetAlert"; $.ajax({ type: "POST", url: url, data: '{alertId: \"' + alertId + '\"}', contentType: "applicati ...

javascriptc#ajax

Creating JSX elements in React by mapping over an object's properties

I need to display the properties of an object named tour in JSX elements using React without repeating code. Each property should be shown within a div, with the property name as a label and its value next to it. Although I attempted to iterate over the o ...

javascriptreactjsnext.js

Currently, my focus is on creating a robust slash command handler for discord.js version 13

I've been attempting to update my command handler to support slash commands, but I keep encountering an Invalid Form Body error when trying to activate the bot. I'm hesitant to switch handlers since I use this one for all my bots, but I can&apos ...

javascriptnode.jsdiscorddiscord.js

Finding the midpoint of the plotted GeoJSON route using Leaflet

I am currently working on a project that involves showcasing a map centered on a specific country and its neighboring countries using GeoJSON. I am curious if there is a way to determine the center point of only the visible portions of a country? One aspe ...

javascriptmapsleaflet