Retrieve parameters from functions and convert them into coherent statements

As I delved into the world of THREE.js, I experimented with various geometries. However, manually writing out each geometry became tedious due to the vast array of options available.

For example, creating a simple cube required these lines of code:

var material = new THREE.MeshNormalMaterial();
var boxGeometry = new THREE.BoxGeometry( 20, 20, 20 );
var box = new THREE.Mesh( boxGeometry, material );
box.position.set(-10, -10, 0);
scene.add( box );

If I wanted to add another shape like a cone, I would have to mindlessly copy and paste the above lines, only replacing Box with Cone. This monotonous task seemed more suited for a computer than a human.

This led me to consider creating a generic class that would simplify this process:

var cube = new Shape('Cube', 20, 20, 20);
// or
var cone = new Shape('Cone', 20, 30);

I envisioned a scenario where this class could automate most of the work for me. Although I could extract the arguments from the function, I pondered on how to convert them from strings to logical statements efficiently.

Answer №1

Utilizing bracket notation enables you to create a function that accesses Three.<word>Geometry. By using rest syntax to gather the other arguments, you can then spread them into the constructor:

function generateShape(shapeType, ...arguments) {
  var material = new THREE.MeshNormalMaterial();
  var geometryShape = new THREE[shapeType + 'Geometry'](...arguments);
  var shape = new THREE.Mesh(geometryShape, material);
  shape.position.set(-10, -10, 0);
  scene.add(shape);
}

Simply invoke the function like this:

generateShape('Cube', 20, 20, 20);
generateShape('Cone', 20, 30);

If you wish to return something that was created in the function to the caller of generateShape, just use return at the end.

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

Conditionally assign a class to the body tag in your Jade template

Let's imagine I have a main template file called layout.jade and several files that extend this template - home, about, products, and more. Within the main template, I have structured it like this: body section.main-content b ...

Having trouble with Postgres not establishing a connection with Heroku

My website is hosted on Heroku, but I keep encountering the same error message: 2018-05-06T19:28:52.212104+00:00 app[web.1]:AssertionError [ERR_ASSERTION]: false == true 2018-05-06T19:28:52.212106+00:00 app[web.1]:at Object.exports.connect (_tls_wrap.js:1 ...

Instructions for extracting the href value from an anchor tag using JavaScript within a specified string

How can I retrieve the href value of the last anchor tag in the provided content string using pure JavaScript, excluding jQuery? var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba ...

Display scrollable content at the bottom

I am currently working on creating a chat application using JavaScript (AngularJS without jQuery) and I am wondering if it is possible to have a scrollable div load to the bottom automatically. While I am familiar with the scrollTo JS property, I do not f ...

Guide to using the ng-click function in Angular to set focus on the input in the last row of a table

I am in the process of developing a task management application and I am looking to implement a specific feature: Upon clicking 'Add Task', a new row is automatically added to the table (this part has been completed) and the input field within ...

Incorporate a new attribute into objects within a designated level of a tree structure in

I am working with an array of objects structured as a tree. I have a requirement to add a new property called "dateType" to the objects at the 3rd level. let tree = [ { id: 1, name: "parent1", children: [ { id: 2, ...

Is there a way to calculate the mean of radio buttons that each have their own distinct values?

My HTML page features a unique rating system created with radio buttons that resemble stars when filled in. The CSS styling gives them an appealing design. Additionally, I have included a submit button to display the selected star count when clicked. Here ...

Prevent excessive clicking on a div element

I am facing a simple issue that I haven't been able to resolve yet. I want to prevent multiple clicks on a button before an AJAX call is complete. This is what I have tried so far: <button id="btn_pay"></button> $("#btn_pay").click( fun ...

Issue with bouncing dropdown menu

I am in the process of enhancing a Wordpress website by implementing a jQuery menu with sub-menus. Below is the jQuery code snippet: $(document).ready(function(){ $('.menu > li').hover(function(){ var position = $(this).position(); ...

Organize intricate JavaScript Arrays

Similar Question: How to sort an array of javascript objects? I'm in the process of transitioning some of my older ActionScript 2.0 code to JavaScript. While most things are running smoothly, I've hit a roadblock when trying to numerically s ...

NodeJs guide on removing multiple documents from a MongoDB collection using their _id values

Consider the following array of _ids: ["a12s", "33qq", "121a"] In MongoDB, there are methods such as deleteMany, which allows deletion based on specific queries: var myquery = { address: 'abc' }; dbo.collection("customers").deleteMany(myque ...

What is the process for converting plain text into an image tag using the methods ".replace()" and ".html()"?

My goal is to customize this particular answer so that it can transform classic BCCode [img]{url}[/img] into an HTML image. In the code snippet provided, I have successfully implemented something similar with [b]text[/b]. However, when attempting to use [i ...

I'm not entirely sure why I keep getting the error message stating "Cannot read property 'innerHTML' of null"

Having an issue with my JavaScript code where I am trying to insert a new table row into the HTML but keep getting an error message that says "Uncaught TypeError: Cannot read property 'innerHTML' of null" <!DOCTYPE html> <html lang=" ...

How can we convert a group of HTML elements sharing a common attribute into an array containing their respective values?

Consider the following HTML structure: <span class="L5" letters="a"></span> <span class="L5" letters="b"></span> <span class="L5" letters="c"></span> <span class="L5" letters="d"></span> <span class="L5" ...

Having difficulty with my async custom react hooks. Is there a way to wait for the result of one hook before using it in another hook?

Having some difficulty working with custom react hooks. I've created 2 custom hooks - one for fetching an ID and another for fetching a profile using the previously fetched ID. Since the second hook is dependent on the ID, I need to await the promise ...

Delete the item along with its associated data from the local storage upon clicking on an icon

I'm currently working on a To-Do List and facing an issue while trying to delete an item upon clicking a trash bin icon. image The problem I'm encountering is that only one data point is removed from local storage when the icon is clicked. If I ...

Retrieving a subset of JSON data from a larger JSON object in a Node.js environment

I'm working with a JSON object structured like this: [ { "id": "458712e247328e4ebfafeb4d922b", "value": [ 1 ], "location": null, "metadata": null, "at": "2015-07-16T16:33:39.113Z" }, { "id": "1ghj78d8220734c00ab941 ...

Utilizing jQuery and Isotope for intricate filtering

My isotope instance contains elements with multiple parameters, as shown below: <element data-a="1 2 3 4 5" data-b="1 2 3 4 5" data-c="1 2 3 4 5" Filtering for an element that has A1, B2, and C3 is straightforward: .isotope({ filter: '[data-a~=1 ...

Issues with tracking changes in Vue.js when using reactive variables

After triggering a click event, I am attempting to choose a message from a json file. However, I am encountering an issue where the first click does not seem to select anything. Upon the second click, the selected messages are duplicated, and this pattern ...

Unable to modify existing attributes in a sails.js model

I'm new to sails.js and I have a question about adding fields to an existing model in Sails.js. Here is the current model: module.exports = { attributes: { id: { columnName: 'id', type: 'integer&apos ...