Changing the location of a cube's axis in three.js

I'm currently working on a project involving three.js (voxel painter). I've run into an issue where, when I adjust the size of a cube, the xyz axis remains centered on the cube instead of aligning with the extreme left. This results in the cube shifting when placed on the grid.

   cubegeo= new THREE.BoxGeometry(100, 50, 70)

My Desired Outcome:

https://i.sstatic.net/T3V69.jpg

The Default Behavior in three.js:

https://i.sstatic.net/txDCp.jpg

Answer №1

To add a matrix to the cubegeo, simply use the following code:

cubegeo.addMatrix( new THREE.Matrix4().setTranslation(cubeWidth/2, cubeHeight/2, cubeLength/2) );

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 benefits does redux-thunk offer?

Why is redux-thunk necessary? It seems like using a thunk just adds an extra layer of complexity by wrapping expressions and using middleware. The sample code from redux-thunk further confuses the process. import thunk from 'redux-thunk'; // No ...

function name cannot be invoked correctly in JavaScript

I am facing an issue with calling my javascript function correctly when I click on it (show_more_in_month_0/1/2). Below is my current code: $i = 0; foreach ($data as $row){ echo '<td><span class="glyphicon-plus show_more_in_mont_'. ...

There seems to be an issue with the transaction payload in the Cardano wallet when submitting an

I am attempting to send a previously signed transaction from cardano-cli using the cardano-wallet endpoint: https://localhost:8090/v2/proxy/transactions Here is how the signed transaction appears: txBody = { "type": "Tx MaryEra&q ...

"Oops, we hit a snag" notification appears when attempting to share on Facebook using the share dialog

I am currently integrating Django with Facebook for page sharing. Below is the code snippet I am using to form the URL: var link = 'https://www.facebook.com/dialog/feed?app_id=1234567890&display=popup&name=' + name + '&descripti ...

How can I use the jQuery Fade function to target multiple items simultaneously?

Currently, I have a jQuery fade function that is used to hide and show reviews along with their respective authors. Initially, only the reviews were set to fade in and out, but now I wish to achieve the same effect for the authors as well. Below is the c ...

What causes the oninput event to act differently in Angular as opposed to regular JavaScript?

As I delve into learning Angular with TypeScript, I've encountered some inconsistencies compared to JavaScript that are puzzling me. Take for example this function that works flawlessly with pure JavaScript, where it dynamically sets the min and max a ...

Determining the selected and active tab within a dynamically generated set of tabs

I am curious about how to identify the selected language tab when uploading a file from a set of dynamically generated tabs. It is important for me to capture and pass on the language that has been chosen. In this scenario, I have specifically clicked on ...

Utilizing NodeJS: Restrict Access to Certain Routes with Middleware

I have two files named server.js and user.js. I am looking to enhance the security of certain routes in user.js using middleware code written in server.js. server.js // :::::: G E T T H E P A C K A G E W E N E E D : : : : : : : ...

What is the best way to include an entire public directory in Webpack to bundle all files?

I am considering switching from using gulp to webpack in my MEAN stack project. For the front end, I am utilizing AngularJs. This is a snippet from my webpack.config.js: const path = require('path'); module.exports = { mode: 'developmen ...

Issue with MomentJS inBetween function consistently displaying incorrect results

I'm currently working on Vue Datatable and I have a specific requirement to search for records between two dates. I am using the moment.js library and the inBetween function to achieve this. Strangely, when I hardcode the dates, the function returns t ...

Choosing the Right Project for Developing HTML/Javascript Applications in Eclipse

Whenever I attempt to build a webpage using eclipse, I am presented with two choices: -- A Javascript project -- A Static web project If I opt for the former, setting up run to open a web browser can be quite challenging. If I decide on the latter ...

Implementing an Ajax function for handling multiple button clicks

So, here's the situation - I've inherited a form with two buttons that inexplicably have the same name and id (seriously, don't ask me why, I didn't design this form haha). I'm attempting to utilize the Ajax .click function to trig ...

Is there a way to trigger a function for both a left and middle click at the same time?

Check out this code snippet: $('a').on('click', function(){ myfunc($(this)); }); function myfunc(el){ console.log('Either left or middle click clicked on the link'); } a{ cursor: pointer; } <script src="https://aj ...

Avoid altering the state directly; utilize setState() to update it instead. Remember to follow react/no-direct-mutation

Here's the code snippet I'm working with: constructor(props) { super(props) this.state = { loginButton: '', benchmarkList: '' } if (props.username == null) { this.state.loginButton = &l ...

Enabling synchronous communication in Node.js IPC

I am currently working on a Node server that initiates a child process using fork() with IPC. During a long-running task, the child process sends results back to the parent around 10 times per second. When the data passed to process.send() is small, everyt ...

What causes the discrepancy in smoothness between the JavaScript animation when offline versus its choppiness when online, particularly on AWS

Recently I delved into game development using HTML5/CSS/JS and embarked on a small project. Check out the game here at this AWS storage link: If you open the game and press SPACE, you'll notice that the ball starts moving with occasional brief pauses ...

Searching through data fields in MongoDB that have been filled with information

In my Mongoose queries, I am dealing with models known as "Activities" that have a specific schema structure. This schema includes fields such as actor, recipient, timestamp, activity, event, and comment. var activitySchema = new mongoose.Schema({ act ...

Stop jQuery from adding duplicate values to a table

When I make an AJAX call using jQuery and PHP to receive JSON response, I am encountering a problem with duplicate values. The code is functioning correctly, but when selecting an option from the drop-down list, duplicate entries appear. The scenario invol ...

Implementing class attributes in VueJS functional components

Creating a VueJS functional component to emulate div behavior involves setting its class based on the props it receives. For example: <MyDiv textAlign="left">Div with left aligned text</MyDiv> Transforms into: <div class="text-left">Di ...

I could really use some guidance on how to begin with the Node.JS app file in BlueMix

After delving into JS tutorials, I feel comfortable with the syntax and approach. Now, my focus is on utilizing Node.JS to develop an app using BlueMix. While I consider myself proficient in Java, web programming is uncharted territory for me, leaving me s ...