Creating a Composite of Several Boxes in THREE.js

My goal is to display multiple boxes together in a specific structure shown in the image I have attached. I am interested in testing the GPU limitations by increasing the number of boxes, and then later on, I will focus on optimization. The framework I am using for this project is THREE.js, which is based on JavaScript. I am considering implementing this task with a three-dimensional array as I believe it would be the most efficient approach. However, I am unsure how to achieve this in JavaScript.

[Box group1

javascriptthree.js

Answer №1

Give it a shot this way:

let renderer, scene, camera;

setup();
animate();

function setup() {

  // renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(40, 40, 40);
  camera.lookAt(0, 10, 0);

  // geometry
  const geometry = new THREE.BoxGeometry();
  const edgesGeometry = new THREE.EdgesGeometry(geometry);

  // material
  const material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
  });
  const edgesMaterial = new THREE.LineBasicMaterial({
    color: 0x000000
  });

  // positions
  for (let x = -10; x < 10; x++) {

    for (let y = 0; y < 20; y++) {

      for (let z = -10; z < 10; z++) {

        // mesh
        const mesh = new THREE.Mesh(geometry, material);
        mesh.scale.multiplyScalar(0.9);
        mesh.position.set(x, y, z);
        scene.add(mesh);

        const lines = new THREE.LineSegments(edgesGeometry, edgesMaterial);
        mesh.add(lines);

      }
    }
  }

}

function animate() {

  requestAnimationFrame(animate);

  renderer.render(scene, camera);

}
body {
    margin: 0px;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f5e9f3e4e4c1b1afb0b2b1afb0">[email protected]</a>/build/three.min.js"></script>

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

Guide for Extracting a String in JavaScript that Includes Numerals for Color Code Alteration, Resulting in Formats like 32m+ or 31m-

Attempting to create a Firebase cloud function in JavaScript that sends email notifications for any changes in the Firebase remote config. Upon each remote config change, the string received is in the following format: { parameters: { [32m+ newer_value: ...

javascriptnode.jsjsonstringparsing

Tips for ensuring that the click event function properly for numerous elements sharing the same class

I'm currently working on adding a flip effect to multiple tiles whenever a user clicks on them as part of building a dashboard-style webpage. I am having trouble making the click event work for all tiles with the same class name. Even though all the ...

javascripthtmlcss

What is the best way to incorporate a generated ID into the datepicker() function whenever a button is clicked?

I'm looking to dynamically generate a row of input fields with unique IDs every time the "add another flight" button is clicked, similar to the functionality seen on destina.us. Additionally, I need to incorporate these generated IDs into the jQuery U ...

javascriptjqueryjquery-uidatepicker

Output the initial value and subsequently disregard any values emitted during a specified time interval

Check out my code snippet: app.component.ts notifier$ = new BehaviorSubject<any>({}); notify() { this.notifier$.next({}); } app.component.html <div (scroll)="notify()"></div> <child-component [inp]="notifier$ | async" /> ...

javascriptangularrxjsobservable

Router DOM in conjunction with Next.js

I am attempting to extract the output of the code in navigation, but unfortunately it is generating a dreadful error: Unhandled Runtime Error Error: You cannot render a <Router> inside another <Router>. You should never have more than one in ...

javascriptreactjsnext.jsreact-router-dom

What is the process behind Express and React Routes when the browser sends an initial GET request?

Embarking on my journey into the realm of React and full-stack development, I find myself in need of guidance on a particular issue that has been eluding me. In my quest to create an app using React and Express, authentication plays a crucial role. My pla ...

javascriptnode.jsreactjsexpressreact-router

Tips on skipping the need to repeatedly use `@ApiProperty()` for every dto in NestJs-swagger

I'm currently exploring ways to streamline the process of specifying @ApiProperty() for each DTO. I've heard about a method involving the creation of a nest-cli.json file, where if you define Promise<DTO> in your controller within nest-swa ...

javascripttypescriptswaggernestjsnestjs-swagger

What steps can I take to ensure that the browser prints out a PDF copy of a webpage?

Imagine you have a website page saved as example.html, and also a printable file named example.pdf. Is there a way to prompt the browser to open and print example.pdf instead of example.html when users attempt to print? If this isn't achievable, how ...

javascripthtmlprinting

Scroll function not functioning properly in Internet Explorer

When attempting to use scroll(x,y) in Internet Explorer 10 with JavaScript, I encountered an issue when trying to run the script on a website. Is there an alternative method that works for IE? This is part of a Java Selenium test where I need to scroll wit ...

javajavascripthtmlcssselenium-webdriver

Loading Large Models in Three.js: Preventing Browser Crashes

I am struggling to import a high-resolution Matterport obj model into the three.js loader. This model is complex and includes multiple textures, resulting in a file size exceeding 80MB. While experimenting with the objloader and web worker version, I enc ...

3dthree.js

Managing array elements in React: removing and duplicating items

One of my tasks is to incorporate a copy and delete button within a table. My goal is to pass the index from the map to the delete and copy onclick functions, however, I am encountering an issue where copying a row results in it having the same index as th ...

javascriptarraysmaterial-ui

What is the best way to toggle the enablement of a textbox with jQuery?

Welcome all! Initially, all controls are disabled. Upon clicking the Add or New button, I want to enable textboxes and the Save button while keeping the Edit and Delete buttons disabled. Once the Save button is clicked, I wish to disable all textboxes and ...

javascriptjquery

Troubles with Geocoding functionality on Google Maps integration within Wordpress

I have a challenge where I want to utilize the title of a Wordpress post (a specific location) as a visible marker on a Google map. The code provided by Google successfully displays the map without any markers: <script>function initialize() { va ...

javascriptwordpressgoogle-mapsgoogle-maps-api-3

Using Rxjs to dynamically map values from an array with forkJoin

Greetings! I have a collection of Boolean observables and would like to apply a logical AND operation. Currently, I am passing static values 'a' and 'b', but I am unsure of the number of elements in the totalKeys array. import { forkJoi ...

javascriptangulartypescriptrxjsjavascript-objects

Ionic is experiencing issues with CORS

I've been attempting to send a JSON to a PHP script on a server, and even though I have added CORS headers in the PHP script, the console is still throwing an error. Error Message XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin&a ...

javascriptphpangularjsionic-framework

Different ways to modify the color and thickness of a variable in HTML5 with either JavaScript or CSS

I am currently working with a JavaScript file where I have a variable defined as follows: var nombre = document.getElementById('nombre').value; The 'nombre' variable corresponds to an element in an HTML file: Nombre: <input type=" ...

javascripthtmlcss

Connecting event listeners to offspring elements, the main element, and the entire document

My request is as follows: I have multiple boxes displayed on a webpage, each containing clickable divs and text. When a user clicks on a clickable div, an alert should appear confirming the click. Clicking on the text itself should not trigger any action. ...

javascripthtmljquerycssjquery-events

Encountering a challenge when attempting to upgrade to Angular 9: Issue with transitioning undecorated classes with DI migration

As I transition from Angular 8 to Angular 9, I encounter an error during the step related to transitioning undecorated classes with DI. While attempting to migrate, I faced an issue with undecorated classes that utilize dependency injection. Some project ...

javascriptangulartypescriptangular9

The specified function 'isFakeTouchstartFromScreenReader' could not be located within the '@angular/cdk/a11y' library

I encountered the following errors unexpectedly while working on my Angular 11 project: Error: ./node_modules/@angular/material/fesm2015/core.js 1091:45-77 "export 'isFakeTouchstartFromScreenReader' was not found in '@angular/cdk/a11y&a ...

javascriptangulartypescriptdependency-managementangular-cdk

Automating the testing of Google Analytics for every event triggered with Selenium WebDriver

Currently, I am in the process of automating Google Analytics testing using Selenium WebDriver Java bindings on our website. The site is equipped with Google Analytics tracking events attached to key elements, and my goal is to confirm that clicking a spec ...

javajavascriptseleniumgoogle-analyticsselenium-webdriver