Produce a variety of shapes using Three.js

I am looking to generate multiple objects.

    var distance = 10;
    var geometry = new THREE.BoxGeometry(10,10,10);
    var material = new THREE.MeshBasicMaterial({color:0x00ff44});

    for(var i = 0; i < 4;i++){
        var mesh  = new THREE.Mesh(geometry, material);
        mesh.position.z = distance;
        scene.add(mesh);
        distance += 5;
    };`

While this code successfully creates objects, they are all in a single row. My goal is to create additional rows behind the initial row, resembling the layout in this image:

Desired Outcome - Image

I aim to add more cubes at the Red X position.

javascriptfor-loopthree.js

Answer №1

let xDistance = 50;
let zDistance = 30;
let geometry = new THREE.BoxGeometry(10,10,10);
let material = new THREE.MeshBasicMaterial({color:0x00ff44});

//initial offset so it doesn't start in the middle.
let xOffset = -80;

for(let i = 0; i < 4; i++){
    for(let j = 0; j < 3; j++){
            let mesh  = new THREE.Mesh(geometry, material);
            mesh.position.x = (xDistance * i) + xOffset;
            mesh.position.z = (zDistance * j);
            scene.add(mesh);
    }
};

Check out this fiddle

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

Utilizing feature flags for Angular modules to enable lazy loading

Can we dynamically change the lazy loaded module based on a specific flag? For instance, loading module A if the flag is active and module B otherwise. The crucial aspect is that both modules should use the same path. Approach #1 - dynamic loadChildren() ...

javascriptangulartypescriptlazy-loadingangular-router

Function in AngularJS to increment counts based on matching names

Check out my angular application on this Plunker link The text area in my app contains data in the format of (key, count). My goal is to sum up these values using the calc() function. When the user clicks the button, I want the total summation to be disp ...

javascriptangularjs

Is it possible to dynamically change the object name using $.ajax function and pass it as a

I'm attempting to parse multiple JSON files into different objects. Here is my approach: function downloadDataSave (targetObject) { // DOWNLOAD CALCULATION BACKUP var filename, response; filename = targetObject.name + '.json' ...

javascriptajax

Expanding Headers with JavaScript

Looking to add a Stretchy Header Functionality similar to the one shown in this GIF: Currently, on iPhones WebView, my approach involves calling a Scope Function On Scroll (especially focusing on Rubberband Scrolling) and adjusting the Image Height with C ...

javascriptioscssangularjsionic-framework

Struggling to get the hang of CSS animation?

Here is a code snippet that I am using: //Code for animating skills on view document.addEventListener("DOMContentLoaded", function(event) { function callback(observations, observer) { observations.forEach(observation => { if (observati ...

javascripthtmlcssioscss-animations

Why do I have to press the button twice for it to actually work?

I am new to programming and I want to create something that has 3 buttons to control the display of 3 hidden images respectively. When I click the first button, the image appears immediately, but I have to click it twice to show the second image. Can anyon ...

javascripthtmlimage

Is there a way to manipulate the DOM without relying on a library like jQuery?

My usual go-to method for manipulating the DOM involves jQuery, like this: var mything = $("#mything"); mything.on("click", function() { mything.addClass("red"); mything.html("I have sinned."); }); Now I am looking to achieve the same result usin ...

javascriptdom

Executing Multiple Requests Concurrently in Angular 5 using forkJoin Technique

Important Note The issue lies in the backend, not Angular. The requests are correct. In my Angular5 app, I am trying to upload multiple files at once using rxjs forkJoin. I store the requests in an array as shown in the code below. However, after adding ...

javascriptangulartypescriptangular5

AJAX Showdown: Comparing jQuery's AJAX API to JavaScript's XHR

tl;dr: I have two different scripts that appear to be identical, but one works while the other does not. Why is this? Let me provide some context for this post. I am working on creating an image uploading form that utilizes AJAX requests to generate a dyn ...

javascriptjqueryajaxhtml

Mastering the use of npm and sails to create HTML-PDF files effortlessly

UPDATE: I am simplifying my question and will address any other concerns in separate posts if necessary. The initial post was too lengthy, hoping for a straightforward guide on utilizing sails to its fullest potential. Apologies. To begin with, my knowled ...

javascriptangularnpmsails.js

Running multiple web applications with different base directories on a single Express server

I am currently working on serving a website that requires different static directories for various routes. When a GET request is sent to the /tools* route, I want to utilize the /dist/toolsApp/ directory as the base directory for my frontend code. If ...

javascriptnode.jsexpress

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

My page contains dynamic HTML content that I want to incorporate. The dynamic content consists of only HTML and CSS, without any JavaScript. However, I have some custom global CSS styles and JS logic that need to be implemented along with this dynamic con ...

javascripthtmlcssweb-componentshadow-dom

Quiz timer using JavaScript

In my HTML and JavaScript project, I am creating a quiz game where players have 15 seconds to answer each question. To implement this timer feature, I used the following code snippet: <body onload="setTimeout(Timer,15000)"> Implemented in JavaScrip ...

javascripthtmldom

I'm looking for recommendations on how to locate FindElements within this particular HTML tag. Can you

Can you extract the value from either the data-bind or data-xid in the following code snippet: <input class="form-control" type="text" maxlength="35" data-bind="value: firstGivenName" data-xid="firstGivenName"/>. ...

javascriptc#seleniumselenium-webdriver

Scraping JavaScript Content Webpages with VBA

I'm attempting to extract a table from the Drainage Services Department website. I've written the VBA code below, but it doesn't seem to be working. I suspect that the issue lies in the fact that this particular table is generated using Java ...

javascriptexcelvbaweb-scraping

Monitoring Clicks within an Iframe

Is there a way to track a click event on a hyperlink within an iframe using Google Analytics? The iframe is located within the same domain as the main page. How can this be achieved? The iframe is added dynamically to the page after it has loaded. Is i ...

javascriptjqueryiframegoogle-analyticsclick

Modify the component's background color when hovering

Is there a way I can modify the background color of the entire panel on hover? I am currently using a simple bootstrap panel with bootstrap-react: <LinkWrapper url={url}> <Panel header="text" bsStyle="primary"> <p>text.</p> ...

javascripttwitter-bootstrapreactjs

Issues arise with AJAX post

I have run into an issue with my jQuery and Codeigniter setup while trying to update the database via AJAX. Despite having the following code in place, nothing seems to be happening or getting sent to my controller when the button is clicked... Snippet of ...

phpjavascriptjqueryajaxcodeigniter

Is it possible to adjust the size of a p5.js canvas within a bootstrap Div container?

I am attempting to incorporate a p5js canvas into a bootstrap grid structure. My goal is to have each div within the grid contain its own unique p5js canvas, which should adjust in size when the browser is resized. Below is my bootstrap grid setup, showca ...

javascripthtmljquerycanvasp5.js

Express server continuously returning 404 error for all requests originating from the index page

Experiencing a challenge with the express/gulpfile.js code. Express can serve the index.html without issue, but it fails to navigate to the lib/* directory resulting in all requests for resources at the top of my index.html returning 404 errors. Browser-s ...

javascriptnode.jsexpress