Create three-dimensional vertices in a Three.js mesh (facets)

After receiving a collection of 200+ vertices from the AutoCad API in the format of an array of vectors {X:,Y:,Z:}, I have been struggling to render them in THREE.js.

Currently, my approach involves creating all possible permutations for the 200 vertices and connecting them together. However, this method has resulted in over 200k faces, which I believe is not the correct way to achieve the desired rendering.

Update: In my AutoCAD code, I am retrieving all vertices and attempting to obtain the ids of their connected vertices (vertex1 and vertex2). Despite using GetHashCode(), I encountered issues where the generated id numbers (e.g., 148335760 and 682610240) are not unique or properly linked to other vertices.

Snippet of AutoCAD code:

//data structures for serialisation
public class EdgeMe
{
    public int vertex1;
    public int vertex2;
}
public class VertexMe
{
    public int id;
    public Point3d Point;
    public List<EdgeMe> Edges = new List<EdgeMe>();
}

public class DataMe{
    public Extents3d extents;
    public string layer;
    public List<VertexMe> points = new List<VertexMe>();
}

//...

// Further implementation details

Javascript snippet:

var faces = function(vertices) {
    // Function logic here
};

var generate = function( ... ) {
    // Code for generating and rendering objects in THREE.js
}

Best Regards,

Ioan

Answer №1

Attempting to predict the connectivity info is not advisable. The proper way is to request the application to provide you with the correct connectivity info.

Answer №2

My recommendation would be to utilize the Forge Model Derivative API for extracting viewable content from your file. Once the file has been translated, you can easily view it using the Viewer (which is specifically optimized for engineering files and based on Three.js). For additional examples, check out this Github repository.

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

Exploring jQuery functionalities for dynamic selector input

I have encountered a scenario where I must use dynamic ID's in the format of functionalDescription_IDNUMBER across my page. It is necessary to target specific areas based on the unique IDNUMBER associated with the clicked object. However, I am looking ...

In the event that the API server is offline, what is the most effective way to notify users that the server is not accessible on the client-side?

I am working on a project where my website interacts with an API hosted on a different server. The website makes API calls and displays the data in a table. However, I want to implement a way to alert the user client-side using JavaScript if the API server ...

Angular allows you to easily upload multiple files at once

I am currently facing an issue while attempting to upload multiple files. There seems to be an error somewhere in my code that I have yet to identify. The problem is that nothing is being displayed in the console, but the 'uploadData' appears to ...

What is the method to trigger a function upon opening an anchor tag?

When a user opens a link in my React app, I need to send a post request with a payload to my server. My current strategy involves using the onClick and onAuxClick callbacks to handle the link click event. However, I have to filter out right-clicks because ...

Implementing reCAPTCHA in Spring MVC with Ajax

I've been attempting to implement Google reCAPTCHA service with Spring MVC, but I keep encountering this error in the console: http://localhost:8080/spapp/ajaxtest.htm?name=frfr&surname=frfr&phone=edede…nGi3CCrD9GprYZDn8VHc-pN--SK-u_xoRKOrn ...

Toggle the visibility of a section in an external .js file

Is there a way to toggle the display of answers from an external .js file using a button? If I were able to modify the code, I could wrap the answers in a div. However, since it's an external .js file, is this feasible? Here's the fiddle and cod ...

Issue with NextJs function not receiving the specified argument variable

Currently, I am focused on developing a Shopify website and fine-tuning the functionality of the shopping cart. My onClick event triggers a function that initiates the process of adding items to the cart. The first step involves checking if there is an exi ...

Selenium WebDriver is encountering difficulty loading the list of followers on Instagram

I have been learning JavaScript, Node.js, and Selenium Web Driver as part of my educational journey. One of my projects involves developing a simple bot for Instagram using the Chrome web driver to emulate a browser. However, I encountered an issue when t ...

The bodyparser in Express seems to be malfunctioning

When configuring my body parser, I implement the following code: const express = require('express') const app = express(); const bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extend ...

Converting Geometry Wireframes to THREE.Line in Three.js: A How-To Guide

After examining the source code provided in this link It appears that creating a dashed line material requires a THREE.Line object, which may pose a challenge when using objects generated by specific methods as demonstrated in the example. However, it i ...

Enhance the functionality of Javascript Promise.then by allowing the argument function to accept an extra parameter

In my code, I am currently utilizing ES6 Promise as shown below: const ctx = {} Promise.resolve() .then(() => doSomethingWith(ctx)) .then((retValue) => doSomethingElseWith(retValue, ctx)) I wish to achieve something like this: const ctx = {} u ...

A guide to building a dynamic form slider that showcases variable output fields with Javascript

I'm interested in creating a Slider Form that shows different output fields when sliding, using Javascript. Something like this: https://i.sstatic.net/3Isl4.png Could anyone provide suggestions on how to achieve this or share any links related to so ...

Retrieve information following an Ajax call inside a pre-designed template

Upon rendering a page with data put together by EJS, the goal is to refresh a section (thirdRow) of the page whenever the user submits new data. The refreshed section should display both the newly submitted data and the existing data. Although I have obtai ...

Simulating realistic decay and distance effects using accurate lighting in three.js

What is the significance of the distance setting in three.js when it comes to physically based lighting? In non physically based lighting, the distance setting determines how the light's effect diminishes linearly. lightAffect = 1 - min(1, distance ...

Learn the process of sending multiple values to a CodeIgniter controller using Ajax

function fetchData(a, b) { let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { document.getElementById("message").innerHTML = xhr.responseText; } }; xhr.open("GET", ...

The element you are trying to interact with is currently not visible, therefore it cannot be accessed

Currently, I am working on a small Test Automation project using C# with Selenium WebDriver. I have run into an issue where some WebElements are not visible or have their 'Displayed' property set to 'false'. This prevents me from perfor ...

One simple click to auto-fill the form

I have encountered a problem that has been discussed before, but my lack of coding knowledge is making it difficult for me to find a suitable solution that matches the code on my website. The issue at hand is as follows: I need my form to populate car mak ...

How can Vue.js transfer form data values (using v-model) from a Parent component to a Child component?

I am working on a multistep form using vue.js. The parent form collects two inputs and once these are validated, it moves to the next step which involves a child component. I want to pass the values from the parent component to the child component's f ...

What is the best way to iterate through an array and make use of index values while removing any empty elements along the

In my current setup, I have defined two arrays keyVals and rows: keyVals = [ "Status", "ErrorHeading", "ErrorDetail" ] rows = [ { "Hostname": "ABC", "name& ...

What could be the reason why the initial console.log is failing to print?

Apologies for the oversight. The !== was a mistake that slipped past me before posting. Thank you for your understanding. I am a beginner in Javascript. I have written this function with winston: function setlogger(log_level = "warn", logfile, scree ...