Geometric structures in the style of Minecraft: Hexagonal Voxel Design

I'm attempting to create a hexagonal map by following the example at .

Is there a way to generate hexagons instead of cubes?

Using the first option from the manual resulted in creating a hexagonal mesh and positioning it.

However, the second option successfully created the hexagon itself, but the class did not work with it.

Code: https://github.com/drPapus/HEX/blob/master/src/client/client.ts

  interface VoxelWorld{
  cellSize:number
  cellSliceSize:number
  cell:any
}

class VoxelWorld {
  static faces: any;

  constructor(cellSize: any) {
    this.cellSize = cellSize;
    this.cellSliceSize = cellSize * cellSize;
    this.cell = new Uint8Array(cellSize * cellSize * cellSize);
  }
  computeVoxelOffset(x:number, y:number, z:number) {
    const {cellSize, cellSliceSize} = this;
    const voxelX = MathUtils.euclideanModulo(x, cellSize) | 0;
    const voxelY = MathUtils.euclideanModulo(y, cellSize) | 0;
    const voxelZ = MathUtils.euclideanModulo(z, cellSize) | 0;
    return voxelY * cellSliceSize + voxelZ * cellSize + voxelX;
  }
  // more code...
javascripttypescriptthree.js

Answer №1

The puzzle has been resolved: view image 

 const cellSize = 1;
 const worldSize = 128;
// CONFIG =============================================================================================
let envmap;
let hexagonGeometries = new BoxGeometry(0,0,0);
interface VoxelWorld {
    cellSize:number
    worldSize:number
    cellSliceSize:number
    cell:any
    cellSizeWidth:number
    cellSizeHeight:number
    cellSizeDepth:number
}

// Additional code and interfaces...

(async function(){
    // Main code for rendering the scene

})();

import {cellSize} from "./_config";

// Size
const s = cellSize;
// 1/2 Size
const s12 = cellSize / 2;
// Width
const w = s * Math.sqrt(3);
// 1/2 width
const w12 = w / 2;
// Height
const h = s * 2;


/*
      3 -- 4
     /      \                 x - red, y - green, z - blue
    2        5                 +x
     \      /                   |
      1 -- 0               -z ---- +z
                                |
         D                     -x
       3 -- 4
    C /      \ E
     2        5
    B \      / F
       1 -- 0
         A
                   ______
                  /      \
           ______/  1.1   \
          /      \        /
         /  1.0   \______/
         \        /      \
          \______/  0.1   \
          /      \        /
         /  0.0   \______/
         \        /
          \______/
          ^
         0.0.0

*/

// Additional Prism Faces definitions...

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

Converting JSON POST data in Mocha test for an Express application

When I run my Express code from Postman, everything works perfectly. However, when I try to call it from Mocha, I encounter issues specifically with setting data in the header of a POST request. This problem only occurs with POST requests containing parame ...

javascriptexpressmocha.js

Determine if I'm actively typing in the input field and alter the loader icon accordingly with AngularJS

Just delving into the world of AngularJS and attempting to tweak an icon as I type in an input box. Currently, I can detect when the box is focused using the following code: $scope.loading = false; $scope.focused = function() { console.log("got ...

javascripthtmlangularjsfocus

Is it possible to use Javascript to gradually fade in text, one word at a time, with multiple divs instead of just one?

I am attempting to gradually fade in individual words from a div. While the code below works fine for a single div, it does not execute sequentially when multiple divs are involved. Here is the fiddle : http://jsfiddle.net/zlud/6czap/110/ Can anyone spot ...

javascriptjquery

``There seems to be a malfunction with the modal feature in the asp.net

Within my strongly typed view, I have a loop that iterates over a list of objects fetched from a database. Each object is displayed within a jumbotron element, accompanied by a button labeled "Had role before". When this button is clicked, a modal opens wh ...

javascriptjqueryajaxasp.net-mvctwitter-bootstrap

Bringing in X3d documents into three.js

Does anyone know if X3d files can be imported into three.js? Perhaps converting the X3d file to a format that three.js can recognize, such as OBJ or STL? Appreciate any assistance with this! ...

three.jsx3dx3dom

Is it possible for JavaScript to only work within the <script> tags and not in a separate .js

I'm facing a puzzling issue with my JavaScript code. It runs fine when placed directly within <script>...code...</script> tags, but refuses to work when linked from an external file like this: <SCRIPT SRC="http://website.com/download/o ...

javascriptjqueryhtml

Three.js is not displayed by the browser

I've recently delved into the world of webGL and three.js and decided to try out an example from JSFiddle, http://jsfiddle.net/BlackSRC/XWCRM/1/ However, upon testing it, I'm facing an issue where nothing is showing up on the screen. Here is th ...

htmlthree.jswebglrender

Fetching data using an Ajax request in PHP is encountering issues, whereas the same request is successfully

I am experiencing an issue with a simple Ajax call in ASP.NET that works fine, but encounters a strange DOM Exception when I insert a breakpoint inside the onreadystatechange function. Can anyone explain why ASP.NET seems to have some additional header log ...

phpjavascriptasp.netajax

Using json_encode with chart.js will not produce the desired result

I am attempting to utilize chart.js (newest version) to generate a pie chart. I have constructed an array that I intend to use as the data input for the chart. This is the PHP code snippet: <?php if($os != null) { $tiposOs = array('Orçamento ...

javascriptphpjsonchart.js

Dealing with multiple v-on:click events in Vue.js

Can I add multiple v-on:click events to the same element? I want to toggle a navigation menu and trigger a CSS animation on the element that toggles the navigation. <template> <div> <nav v-if="visible"> <ul&g ...

javascriptvue.js

What is the best way to determine the count of elements in an array that have the active property set to true?

Can anyone help me figure out the most efficient way to solve this problem? (Filter, ng-repeat, or another method?) <div>Number of active items: {{product.length}} </div> //total number of items <div>Number of inactive items: {{product.l ...

javascriptangularjs

JavaScript embedded within LD-JSON format

Is it feasible to run JavaScript code within an ld+json script? Like for instance, "window.location.hostname" <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "http://" + window.location.ho ...

javascriptjsonjson-ld

Please ensure that the form is only submitted when at least one checkbox is selected by utilizing JavaScript

When I visit the following form: Upon filling out the details and clicking submit, if I forget to check a checkbox, a prompt appears stating "please select any one checkbox" with an 'ok' button. After clicking 'ok', the form is then su ...

javascriptjquery

The function does not have a specified return value

I've been grappling with this issue for quite some time and I can't figure out what's causing the problem. In my code, I have a separate class called Database.js that handles MySQL functions, manages connections, queries, etc. My goal is to ...

javascriptmysqlnode.jssocket.io

Issue in Angular Material: The export 'MaterialComponents' could not be located in './material/material.module'

I'm relatively new to Angular and I am encountering some difficulties when trying to export a material module. The error message that appears is as follows: (Failed to compile.) ./src/app/app.module.ts 17:12-30 "export 'MaterialComponents&ap ...

javascriptangulartypescriptangular-material

Access a JSON response within an HTML/JavaScript document

Can the scenario below be achieved? Here is the ajax response I received: HTML <body> <input type="text"></input> <div id="trydiv"></div> </body> JS $.ajax({ type: "POST", url: "json.php", ...

javascriptjson

What is the best way to identify duplicate keys in fixed JavaScript objects?

My approach so far has been the following: try { var obj = {"name":"n","name":"v"}; console.log(obj); // outputs { name: 'v' } } catch (e) { console.log(e); // no exceptions printed } My goal is to detect duplicate keys within a ...

javascriptstatic

A script in PHP or JavaScript that dynamically generates two dual drop-down menus to assist with data selection

I have experience with php scripting, but I am facing challenges when trying to combine it with JavaScript. The issue arises when I have a form that includes dropdown menus for categories and subcategories. When a category is selected, the options in the s ...

javascriptphpajax

Ways to speed up the initial loading time in Angular 7 while utilizing custom font files

Storing the local font file in the assets/fonts folder, I have utilized 3 different types of fonts (lato, raleway, glyphicons-regular). https://i.stack.imgur.com/1jsJq.png Within my index.html under the "head" tag, I have included the following: <lin ...

javascriptnode.jsangulartypescriptecmascript-6

The v-select menu in Vuetify conceals the text-field input

How can I prevent the menu from covering the input box in Vuetify version 2.3.18? I came across a potential solution here, but it didn't work for me: https://codepen.io/jrast/pen/NwMaZE?editors=1010 I also found an issue on the Vuetify github page t ...

javascriptcssvue.jsvuejs2vuetify.js