Arrange 3D blocks on a grid using ThreeJS with customizable dimensions

I've been experimenting with the voxel painter example found in the ThreeJS git repository.

One change I made was adjusting the grid size to 5x5, but now the roll-over mesh doesn't align perfectly with the grid squares and overlaps between four of them.

Additionally, I'm looking for a way to make it possible to adjust the grid size to various dimensions such as 5x10, 12x5, or 16x24. Does anyone have any suggestions on how to accomplish this?

Below is the code snippet I'm currently working with:

  var sizeX = 300;
  var sizeY = 300;

  function init() {
    // Code for setting up the roll-over mesh, cubes, and grid
  }

 function onDocumentMouseMove( event ) {
    // Code for handling mouse movement and interaction with objects
  }

Codepen: http://codepen.io/anon/pen/RPrxOX

Answer №1

To adjust the dimensions of the spheres, modify the positioning of the shapes as needed by updating the line below

respawnMesh.position.divideScalar( 75 ).round().multiplyScalar( 40 ).addScalar( 15 );

Adjust these parameters according to the specific sizes you want.

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 display a unique image in a div based on the size of the

Being new to web design, I have a question about creating a webpage with a large image in the center like on GitHub's Windows page. How can I work with the image inside that particular div or area based on different screen sizes? Is it possible to mak ...

Transferring user input to a child process in Node.js

I'm currently developing an online C++ compiler using the Node.js environment. With the help of the spawn function, I've managed to create a child process that compiles and executes the code, returning the output to the user. However, I'm f ...

Focus automatically on an input component when the value in the Vuex store is updated in Vue

Here's the code snippet from my component: //template <v-select ref='ItemSearchSelect' :options="options"></v-select> ... //script created: function () { this.$store.subscribe((setFocusSearch, state) => { ...

Ways to access the req.user object within services

After implementing an authentication middleware in NestJs as shown below: @Injectable() export class AuthenticationMiddleware implements NestMiddleware { constructor() {} async use(req: any, res: any, next: () => void) { const a ...

"Apply a class to a span element using the onClick event handler in JavaScript

After tirelessly searching for a solution, I came across some answers that didn't quite fit my needs. I have multiple <span id="same-id-for-all-spans"></span> elements, each containing an <img> element. Now, I want to create a print ...

How to eliminate space preceding a div using jQuery?

I am trying to modify the following code snippet: <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> Is there a method for me to eliminate the space before div "three" in order to achieve this result: ...

Efficient method invocation for objects within an array using functional programming techniques

Is there a way to execute a method that doesn't require arguments and doesn't return anything on each object within an array of objects that are all the same type? I've been trying to find a solution without resorting to using a traditional ...

Refreshing the page using AJAX in WooCommerce after executing my custom script

I am experiencing an issue with WooCommerce. I am trying to incorporate a custom jQuery script that executes after clicking the add to cart button. When I do not include my script, everything functions properly - the AJAX request triggers and the product i ...

AngularJS has encountered an undefined form within its scope

In my main JavaScript file, I have a collection of functions that are used throughout my application. This JS file also handles the routing of the app. main.js (MainController): $stateProvider .state('page1', { url : '/&apo ...

Is there a more efficient method for converting an array of objects?

Is there a more efficient way to change just one value in an array without iterating through every element? I've included the code below where I am trying to update the contact number for each user in an array. Although my current solution works, it ...

Real-time webpage featuring dynamically updating text sourced from a file

After spending 5 hours attempting this on my own, I've decided to reach out for help. I am in need of creating a page that will automatically update itself and display the content of a file when it changes. For example, let's say we have a file ...

What is the best way to transform an array of string values into an array of objects?

I currently have an array of strings with date and price information: const array = [ "date: 1679534340367, price: 27348.6178237571831766", "date: 1679534340367, price: 27348.6178237571831766", "date: 16795 ...

Leverage the Google Drive API for the storage of app-specific data

I'm currently developing a JavaScript application that runs on the client side and need to store a JSON object containing configuration details in a Google Drive Appdata file. Through the Google Drive API, I can successfully check for the file within ...

Angular button will be disabled if the form control is empty

Is there a way to deactivate the search button when the text box is empty? I attempted to use the "disabled" attribute on the search button, but it didn't work. Here is my HTML code: <div class="col-md-5 pl-0"> <div class="in ...

Issue with AngularJS form not being visible on the user interface

I'm new to Angular and struggling to display my form. I used to generate the form. Page Link: Any assistance would be appreciated! Index.html <!DOCTYPE html> .... // (This section is too long for paraphrasing) My HTML <div clas ...

Combining values from multiple sets of 'radio buttons' in React to get a total

After analyzing the following dataset: const data = [ { id: 1, category: "category1", name: "N/A", price: 0, }, { id: 2, category: "category1", name: "Cheese", ...

Is it recommended to add the identical library to multiple iFrames?

Here's a quick question I have. So, my JSP page has 4 different iFrames and I've included JQuery UI libraries in it: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://c ...

Troubleshooting: The issue of importing Angular 2 service in @NgModule

In my Angular 2 application, I have created an ExchangeService class that is decorated with @Injectable. This service is included in the main module of my application: @NgModule({ imports: [ BrowserModule, HttpModule, FormsModu ...

How can I remove the bouncing effect of the top bar in Chrome when scrolling in Three

There is a frustrating problem I am encountering on my website with the joystick control. Whenever I try to move my joystick down, Chrome triggers either the refresh dropdown or the top bar bounces and goes in and out of fullscreen mode. ...

Express Module Employs Promises for Returns

I have a JavaScript file for elasticsearch (could be any other database as well) that performs a simple query and uses a promise to return the data. I am using this module in my Express server (server.js) with the hope of retrieving the data, as I ultimat ...