My goal is to create a platform where users can upload a basic 3D model and customize it by engraving a rectangular shape onto it using their own specifications

Starting my journey in web development, it seems like I'll be delving into Three.js. However, I'm a bit unsure of where to begin and how to navigate this new territory.

The idea is to have an STL file displayed on my webpage with three text fields for length, width, and height. When the user clicks "generate," a cubic volume will be engraved on one side of the STL file. The updated model can then be downloaded.

I've been trying to install Three.js and familiarize myself with it. While I have dabbled in CSS, HTML, and some JS, as well as manipulated 3D models in Blender, doing so within a web environment is uncharted territory for me.

javascripthtmlcssthree.js

Answer №1

  1. To begin, start by downloading and installing Three.JS. Follow the step-by-step guide available at . I suggest opting for option 2 (CDN) for simplicity.
  2. Take a look at this example demonstrating how to load STL files: . You can view its code by clicking the small button in the bottom right corner.
  3. Next, write your own code. Position your STL object at the center and utilize an orbit camera. Adjust the scale of the object using 
    <object>.scale.x/y/z = <scale>
    .

It is advisable to refer to this tutorial as you work through the process:

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

What is the best way to implement word-wrap on ANTD Select's title and dropdown options in order to adjust the element's height?

I need my ANTD title/selected item to be on a separate row and adjust the height of the Select component. Here is the example I have been working on: https://codesandbox.io/s/basic-usage-antd-4-24-7-forked-8jzp29?file=/demo.js These are the specific styl ...

cssreactjsantdcss-modules

Having difficulty with closing a modal using v-model in VueJS

Upon pressing the button labeled Close, an error message appeared in the console as shown below: "Error: Cannot find module './undefined'" found in ---> <WhatsNew> at src/components/WhatsNew.vue Displayed below is the conten ...

javascriptvue.js

Using a jQuery function to search for values in an array

This is the format of my structure: var var1 = { array1 : ['value1','value2', ...], array2 : ['value3','value4', ...] ... }; I am looking for a JavaScript function that can search for values within ...

javascriptjqueryarrayssearch

Comprehend the angular and in a confined scope and its brackets

I have been wondering why I have to use double brackets ()() when passing a method from an outer scope to a directive with an isolated scope using '&'. It seems like the function is returned with callThat() and then I need to call it with anothe ...

javascriptangularjsangularjs-directiveangularjs-scope

Creating dynamic links with Jquery

Here is a piece of Jquery code that needs to be adjusted: var previewImage = $('#prev'); var newLink = $('<a/>').attr('href', name); previewImage.append(newLink); The current HTML output is <img src=" " id="prev"/& ...

jqueryhtmlhyperlinkhrefvar

Encountering an issue of receiving "Undefined" while attempting to access constant data from a ReactJS file within my NodeJS

I am currently working on a file named check-rates that stores useStates() which are inputs provided by users. These inputs are essential for me to calculate and provide an estimated value for their shipment using the DHL API. In my nodejs express server, ...

javascriptnode.jsreactjsexpress

Utilizing Node.js to Retrieve a POST Request JSON and Modify its Format

Received an incoming Post request in JSON format like this: [{"username":"ali","hair_color":"brown","height":1.2},{"username":"marc","hair_color":"blue","height":1.4},{"username":"zehua","hair_color":"black","height":1.8}] Need to transform it into the f ...

javascriptnode.js

What is the best way to position the logo in the center of the navigation bar, considering there are an unequal number of menu items on each side

As I work on coding a design I found for practice, I am facing the challenge of getting the logo to be centered in the navbar, similar to the layout in the Dribble link below. View Design on Dribble The navigation bar has 4 items aligned on the left and ...

htmlcssfrontend

Vue-Apollo - The 'value' property is not present in the 'Readonly<Ref<Readonly<any>>>' type

MY CURRENT DILEMMA: In my quest to seamlessly integrate vue-apollo v4 with Typescript, I have encountered a challenge. I am in the process of retrieving data from a simple query using useQuery along with useResult. The default return type of useResult i ...

javascripttypescriptvue.jsvuejs3vue-apollo

What are the most effective ways to manage state in form components using React?

As I delve into the realm of best practices for managing state in React components, I find myself grappling with different approaches. Initially, I crafted a form by creating a TextField component structured like this: var TextField = React.createClass({ ...

javascriptformsreactjs

Is activating the CSP policy preventing the JavaScript on the front end from transmitting cookies and the referrer header?

Upon removing the CSP policy from the backend in Node.js, everything functions correctly. However, enabling it results in a break in the JavaScript code. To investigate further, I analyzed the request headers of the AJAX requests made by my JS files. Two ...

javascriptnode.jscontent-security-policy

Can someone explain the process of adding a JavaScript state variable from one React component so that it can be utilized in other components?

In my Home.js component, I handle user sign up to the API and login. After receiving the token from the authorization header in the response, I save it in the state variable 'token'. This token is crucial for accessing the API in other component ...

javascriptreactjsjsonreact-nativerequest

Guide on creating a similar encryption function in Node JS that is equivalent to the one written in Java

In Java, there is a function used for encryption. public static String encryptionFunction(String fieldValue, String pemFileLocation) { try { // Read key from file String strKeyPEM = ""; BufferedReader br = new Buffer ...

javascriptjavanode.jstypescriptrsa

Is it possible to transfer a massive number of files using node.js?

I need to asynchronously copy a large number of files, about 25000 in total. I am currently using the library found at this link: https://github.com/stephenmathieson/node-cp. Below is the code snippet I am using: for(var i = 0; i < 25000; i++ ...

javascriptnode.js

Why are my div elements mysteriously adding bottom margin?

I've encountered an unexpected margin bottom issue while working on some HTML and Bootstrap code. No matter how I try to set the div margin to 0 in a separate stylesheet, like this: body { margin: 0; } div { margin-bottom: 0; } The problem persi ...

htmlcssbootstrap-5

Can you incorporate personalized icons in ReactJS?

Is there a way to incorporate my personally designed custom icons, available in both SVG and TTF formats, into a React project? I am interested in using these icons in my navigation bar, such as creating a unique home icon for the home button. ...

javascriptreactjsreact-nativereact-reduxicons

Exploring the Fundamentals of XSS

Currently, my technology stack consists of Symfony2, Twig, and Doctrine. When it comes to securing my website, I am particularly concerned about preventing XSS attacks. However, despite taking precautions, I'm not sure what more I can do. Persisten ...

phpjavascriptsymfonyxss

The 1.4.8 version of angular.js is throwing an error message labeled as $resource:badcfg. This error is showing up in the regular

After loading the page, Angular throws the following error: angular.js:12520 Error: [$resource:badcfg] http://errors.angularjs.org/1.4.8/$resource/badcfg?p0=query&p1=array&p2=object&p3=GET&p4=%2Fapi%2Fprospects%2Factive at Error (nativ ...

javascriptangularjs

HTML Buttons Remain Selected After Being Clicked

Currently working on a calculator app for a class project but I've hit a roadblock while setting up keyboard listeners. The keyboard functionality is fine, however, when it comes to clicking on buttons, specifically the non-keyboard functions, they re ...

javascripthtmlcsstwitter-bootstrap-3

Broadcasting Packets Between Node.js Ports

I have a set of server.js and client.js scripts that work in tandem. Below is the server.js script... var express = require('express'); var appMain = express(); var appReset = express(); var serverMain = require('http').Server(appMain ...

javascriptnode.jssockets