The present coordinates of a vertex in Three.js

Currently, I am in the process of constructing a Cube using the standard new THREE.CubeGeometry method. I have adjusted the mesh's position (x,y,z) and successfully incorporated it into the scene. My next step involves drawing cubes in all six corners of the initial cube upon user interaction. How would I go about obtaining the coordinates for each vertex in the coordinate system?

Answer №1

A straightforward way to achieve this is:

let cubeGeometry = new THREE.CubeGeometry(...);
let verticesArray = cubeGeometry.vertices;

Answer №2

For those in search of 8 vertices or corners, you can find a demo at this link: http://jsfiddle.net/ebeit303/54uQ9/

function addShapes() {
width = 100;
height = 100
depth = 100;
var geometry = new THREE.CubeGeometry( width, height, depth );
var material = new THREE.MeshBasicMaterial({color:0xffccff, side:2, overdraw:true} );

mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
mesh.position.set(10,20,20);
var x = mesh.position.x;
var y = mesh.position.y;
var z = mesh.position.z;
console.log(geometry.vertices);
var len = geometry.vertices.length;
for(var i = 0; i < len; i++){
    var vx = geometry.vertices[i].x;
    var vy = geometry.vertices[i].y;
    var vz = geometry.vertices[i].z;
        var material1 = new THREE.MeshBasicMaterial({color:Math.random()*0xffffff, side:2, overdraw:true, opacity:0.6, transparent:true} );
    var mesh1 = new THREE.Mesh( geometry, material1 );
    group.add(mesh1);
    mesh1.position.set( (vx*2)+x,(vy*2)+y,(vz*2)+z);
}
}

This demonstration showcases a cube with 8 vertices/corners. Additional cubes are then created and positioned on each vertex of the central cube using basic geometric properties. The cubegeometry - geometry.vertices relationship and mesh positioning are key components of this simple calculation. Explore the jsfiddle link for a clearer understanding.

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

AngularJS chatbox widget for interactive communication

Currently, I am in the process of developing the back-end for a web application utilizing angularJS. One of the key features is allowing users to communicate with each other through a pop-up chat box similar to those found in Gmail or Facebook. My goal is ...

An error was encountered: object does not possess the function 'tooltip'

I have been attempting to display a tooltip on a textbox using jQuery scripts within a web form that utilizes a Master Page. While everything appears to be working fine when I run my code, I am encountering the above error in the resources folder of the DO ...

What is the function of this program created with three.js?

I've been searching through various resources but I couldn't find any information on this new capsule. Although I understand the basics - that it creates a new capsule - I'm still unsure about the specific inputs required for it. Could someo ...

How can Cheerio help you effortlessly and stylishly locate tags that meet various specific criteria?

I am attempting to scrape data from the webpage . Specifically, I am looking for all the <li> tags that are nested within an <ul> tag, which in turn is located inside a div with the class mw-parser-output and has a property of title. Is there ...

Dynamic row addition in Material Design Lite table causes format to break

Here's the HTML markup for creating a checkbox using material-design-lite: <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox"> <input type="checkbox" id="checkbox" class="mdl-checkbox__input" /> <span c ...

Extract content from whole webpage including HTML, CSS, and JavaScript

Currently I am working on developing a webpage version control backup/log system. The goal is to automatically save a static copy of the webpage, including all its CSS and JavaScript files, whenever there are any changes made. I have already figured out h ...

Retrieve data from a JavaScript generator-stream by applying a filter to the values

After watching a thought-provoking video on computerphile, I was inspired to try my hand at implementing the sieve algorithm using JavaScript generators. While I have experience with JavaScript, working directly with generators is a new challenge for me. ...

javascript/jquery form validation problems/support needed (jQuery)

Long story short, I am facing an issue with my code and seeking some guidance. I have various functions to perform different checks. For this particular example, I have a form with a default value of "enter name here" for one field. Here is the HTML snipp ...

Utilizing a switch statement for efficiently loading multiple objects within a Three.JS framework

Currently, I am working on a web 3D model viewer that utilizes Three.JS. My goal is to enable users to select different models from a dropdown list using dat.GUI. To achieve this, I have been experimenting with a switch statement, drawing inspiration from ...

Exporting routes in Node.js and Express - A step-by-step guide

I am experiencing an issue that is not entirely related to the question, but rather to the same page. After exporting a route to my main app.js file, my post route is not functioning. Below are the problems I am facing, which require you to read the code t ...

The flow of Node.js persists despite a response being dispatched

The code snippet I have below checks for spaces in a text, verifies a link asynchronously, and handles post requests. However, there is an issue when the email and password fields are null, resulting in an error message "Cannot read property 'trim&apo ...

send back the result to the primary function

I need help with this code. I'm trying to return the budget from callbacks in the main function. How can I return a value from the main function? // This method returns the current budget of the user getCurrentBudget: function (req) { var reqTok ...

Array insertion is not supported by Node MSSQL

I am trying to insert multiple rows at once using an array of data. Here is how my array is structured: [ [ '1234' ], [ '5678' ], [ '9123' ]... ] And here is the query code I am using: const sql = require('mssql&a ...

What strategies can be used to effectively manage multiple asynchronous requests?

I have two requirements: one is to load an image (which will take a long time on the backend server), and the other is to perform an AJAX request. I would like it to be structured like this: $.when( [perform image loading] [perform ajax request] ).t ...

Encountering an Assertion Error when attempting to import a custom package in Angular 13

Seeking assistance: I have developed my initial Angular package which offers various services for making HTTP requests to a server and fetching results. Upon importing the service, the webpage ceases to render and displays the following error message: cor ...

Excessive Function Calls Detected in AngularJS Application

I'm facing a major performance issue. I need to display details in a list, but the function is being called excessively. Feel free to check out the demo here Here's the HTML code snippet : <div ng-controller="MyCtrl as ctrl"> <p>K ...

Error message for empty input is not being displayed upon submission in Bootstrap validation

I've been attempting to implement Bootstrap validation in a form with the following desired outcome: Upon submission of the form, if the "First name" field is left empty, a message saying "Please enter a name" should appear below the field. If the f ...

Grouped format of a Highcharts Stacked Column Chart

Looking to replicate the chart image below using Highchart.js instead of Excel. If anyone can assist in creating this chart with different color combinations, it would be greatly appreciated. Image Preview I've already attempted a similar implementa ...

Ways to update the content of a NodeList

When I execute this code in the console: document.querySelectorAll("a.pointer[title='Average']") It fetches a collection of Averages, each with displayed text on the page: <a class="pointer" title="Average" onclick="showScoretab(this)"> ...

Is there a way to display an XML listing recursively similar to the functionality of an ASP:MENU in the past?

I have been working on converting a previous asp:menu item to JavaScript. Here is the JavaScript code I have come up with: function GetMainMenu() { var html = ''; var finalHTML = ''; finalHTML += '<d ...