Generating a sphere at the center of a cube's vertices using Three.js

I have a cube and I'm looking to place small spheres on each vertex of the cube. I've attempted to write some code but nothing seems to be working correctly. Here is the representation of my cube:

var geometry0 = new THREE.Geometry()
geometry0.vertices = [new THREE.Vector3(0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, 0.5), new     
THREE.Vector3(-0.5, -0.5, -0.5), new THREE.Vector3(0.5, -0.5, -0.5), new THREE.Vector3(0.5, 0.5,   
0.5), new THREE.Vector3(-0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, -0.5), new    
THREE.Vector3(0.5, 0.5, -0.5)]; 
geometry0.faces = [new THREE.Face3(3, 2, 1), new THREE.Face3(3, 1, 0), new THREE.Face3(4, 5, 6),   
new THREE.Face3(4, 6, 7), new THREE.Face3(0, 1, 5), new THREE.Face3(0, 5, 4), new THREE.Face3(1,   
2, 6), new THREE.Face3(1, 6, 5), new THREE.Face3(2, 3, 7), new THREE.Face3(2, 7, 6), new  
THREE.Face3(3, 0, 4), new THREE.Face3(3, 4, 7)]; 

geometry0.computeFaceNormals();
 geometry0.computeVertexNormals();
var material0 = new THREE.MeshBasicMaterial( { color: 0x39d2dbe7fff39d2, transparent: true, opacity: 0 });
mesh0 = new THREE.Mesh( geometry0, material0);
egh0 = new THREE.EdgesHelper( mesh0, 0x000 );
egh0.material.linewidth = 2;
scene.add( egh0 );
javascriptthree.jshtml5-canvas

Answer №1

To create a visual representation of the cube, I would iterate through each vertice and generate a sphere at that specific point.

Here is an example code snippet for drawing red spheres with a radius of 0.2:

var spheres = [];
for (var i=0 ; i<geometry0.vertices.length ; i++){
  var sphereGeometry = new THREE.SphereGeometry(0.2,10,10);
  var sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,opacity:1});
  var spheres[i] = new THREE.Mesh(sphereGeometry,sphereMaterial);
  spheres[i].position.set(geometry0.vertices[i].x,
                      geometry0.vertices[i].y,
                      geometry0.vertices[i].z);
  scene.add(spheres[i]);
}

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 steps can I take to stop the browser from refreshing a POST route in Express?

Currently, I am using node along with stripe integration for managing payments. My application includes a /charge route that collects various parameters from the front end and generates a receipt. I am faced with a challenge on how to redirect from a POST ...

javascriptnode.jsexpressstripe-payments

The menu vanishes when the screen size is reduced

Can't figure out why my JavaScript is causing issues with my menu. I've made a mistake in the JavaScript file, but in general it's working fine. The problem arises when you load the page with a width less than 858px, then click on one of th ...

javascripthtmlcss

Refreshing the DeckGL HexagonLayer upon changes to the data array/Initiating a reload for the DeckGL HexagonLayer

I am currently using DeckGL along with React to showcase data on an OpenStreetMap. My goal is to incorporate filters to allow for different views of the data I possess. The main issue I encounter is the inability to refresh the layer representing the data ...

javascriptreactjsdeck.gl

Implementing the dblclick event handler with jQuery on multiple elements

I am facing an issue while trying to bind a double click event to divs within a nodeList that I am looping through. Below is the code snippet: var elements = document.getElementsByClassName("click"); currentElement = elements[0].id; for (var i=0; i<ele ...

javascriptjquery

Can you provide instructions for generating a simple menu bar with options utilizing webgl/three.js?

I find the documentation for the three.js 3-D viewer difficult to understand as a beginner. I am curious about the fundamental steps involved in creating a menu bar or selector with options for a 3-D viewer using three.js / WebGL. Additionally, I am inter ...

javascriptthree.jswebgl

Utilizing the zIndex property in webGL programming

I am currently working on a three.js program My main goal is to display a 2D panel in front of the three.js scene for debugging purposes. I plan to achieve this by creating a div element and adjusting its z-index to show it above the three.js canvas. Un ...

javascriptthree.js

The Nextjs API request functions properly when accessed locally

I am currently attempting to write to a Google Sheet using the 'google-spreadsheet' package through Next.js API route. During local testing, everything functions as expected and data is successfully updated in the Google Sheet. However, after dep ...

javascriptreactjsnext.jsgoogle-sheets-apivercel

observing the pathway and modifying a variable within a directive's scope

A specialized directive has been crafted below, designed to generate a series of buttons relying on the data supplied to it. angular.module('btnbar.directive', ['messaging']). directive("btnBar", function(){ return { restrict: &a ...

javascriptangularjs

Error Type: Using type 'string[]' as an index type is not allowed

Something is not right here: let organization = organizationList2[context.params?.organizationId]; Failed to compile. ./pages/[lang]/designer/[organizationId].tsx:337:40 Type error: Type 'string[]' cannot be used as an index type. 335 | }) ...

javascripttypescriptnext.js

Observing an element within AngularJS

Struggling to watch an object in AngularJs 2. In a directive, I have an object like this: scope.timelineFilter = {hasCapacity: true, onlyActivated: true, companyIdList: []}; I use 2 JQuery functions to change values of the object (adding a third soon) ...

javascriptjqueryangularjs

Encountered an Ajax issue while initializing a datatable on a table inside a modal dialog

I have a modal that contains a search box. When the search button is clicked, an ajax call is made to the controller to retrieve a table of results, which are then inserted into a div like this: $.ajax({ url: url, data: JSON.stringify(viewModel), ...

javascriptjqueryhtmlajaxdatatables

Is there a way to restrict a forEach loop so that it only runs 16 iterations?

I'm looking to limit the number of results shown in a forEach loop to only 16. Is there a way to achieve this? <div class="events-list" data-bind="if: (typeof(Events) != 'undefined')" style="padding-top:5px; padding-bottom:5px;"> ...

javascripthtmlknockout.js

Trigger a JavaScript alert when encountering an error message in the database connection function within PHP

Hey there, I've created a function within the db class: FUNCTION DB_Class($dbname, $username, $password) { $this->db = MYSQL_CONNECT ('localhost', $username, $password) or DIE ("Unable to connect to Database Server") ...

phpjavascriptmysqlclass

How can I stop browsers from storing data such as scroll position and zoom level to improve performance?

In the development of my interactive web game set entirely in the browser, I am utilizing html5 with all elements integrated into the game world. Due to this setup, precise control over element positioning, scroll behavior, zooming, and other aspects is cr ...

javascripthtmlcsszoomingbrowser-cache

Expanding the dimensions of $state.store.object within a vue.js application

As I delve into learning Vue.js, I've noticed that the application I'm currently developing fetches data from a database and then organizes it into a list before binding and displaying it on the page. Here's a snippet of the code where this ...

javascripthtmlvue.js

Mapping a bar chart on a global scale

Are there any methods available to create bar charts on a world map? The world map could be depicted in a 3D view resembling a Globe or in a 2D format. It should also have the capability to zoom in at street level. Does anyone have suggestions or examples ...

javascriptjquerythree.jswebglcesiumjs

Touch target for scrollbars

While developing the modal in HTML, I encountered an issue where keyboard-only users cannot access all content within the modal. I came across a note stating that the scrollbar touch target should be 44px by 44px. I tried reading this documentation https ...

javascripthtmlcss

Retrieve data from a local JSON file and showcase it in a list within a Next.js project. The error "Property 'data' does not exist on type String

Having trouble displaying the names of crates (which are filled with records/albums) from a local JSON file. The names aren't showing up and I'm wondering if I should be using params or if perhaps not stringifying the JSON would help. Visual Stud ...

javascriptreactjsjsonreact-hooksnext.js

Using JavaScript functions within PHP is not supported

Currently, I am utilizing Laravel for my backend operations. Within my setup, there exists a JavaScript function called StartJob() that facilitates Google crawling. In the scenario where I input a keyword, which is then cross-referenced with the database, ...

javascriptphpajax

Challenges with npm and Node.js compatibility in a Vite project

I've run into a problem while attempting to launch my Vite project using npm. After updating Node.js to version 18.16.0, I'm now receiving the following error message: The specified module could not be found. \?\C:\Users\Riaj& ...

javascriptreactjsnode.jsvite