I am currently working on creating a plugin prototype to allow customization of 3D objects using ThreeJS. You can view my progress so far here:
If you've visited the link, you may have noticed that when hovering over the left or right arrow, the object rotates with its origin point at the top left corner. Does anyone have suggestions on how to change this behavior in ThreeJS?
Below is the code I have been working on:
var options = $.extend({
// code continues here
group.transformByTranslation( new THREE.Matrix4().makeTranslation( x,y,z ) );
Many solutions I found didn't work for me, possibly because I was dealing with a group of objects instead of a single object.
Finding the center of all object positions
var maxTrans = {x:0, y:0, z:0};
var minTrans = {x:0, y:0, z:0};
var translate2Center = {x:0, y:0, z:0};
for(var i=0; i<options.objPosition.length; i++) {
var temp = options.objPosition[i];
if (temp.x > maxTrans.x) maxTrans.x = temp.x;
else if (temp.x < minTrans.x) minTrans.x = temp.x;
if (temp.y > maxTrans.y) maxTrans.y = temp.y;
else if (temp.y < minTrans.y) minTrans.y = temp.y;
if (temp.z > maxTrans.z) maxTrans.z = temp.z;
else if (temp.z < minTrans.z) minTrans.z = temp.z;
}
translate2Center.x = minTrans.x + (maxTrans.x-minTrans.x)/2;
translate2Center.y = minTrans.y + (maxTrans.y-minTrans.y)/2;
translate2Center.z = minTrans.z + (maxTrans.z-minTrans.z)/2;
Translating each object before adding it to the group
for(var i=0; i<options.numObj; i++){
options.core.object[i].position.x = options.objPosition[i].x - translate2Center.x;
options.core.object[i].position.y = options.objPosition[i].y - translate2Center.y;
options.core.object[i].position.z = options.objPosition[i].z - translate2Center.z;
options.core.group.add(options.core.object[i]);
}
Moving the entire group back to its original position
options.core.group.transformByTranslation( new THREE.Matrix4().makeTranslation(
translate2Center.x, translate2Center.y, translate2Center.z)
);
Whenever I attempt to call one .ts file from another using .Form, I encounter the following error: Uncaught (in promise): TypeError: this.Form is undefined The file that contains the error has imported the .ts file which I intend to pass values to. ...
Looking to add a click event to the image in my EJS file, here's the EJS code snippet: <div class="container" id="comments"> <div class="row"> <div class="col-lg-12"> <div class="well"> ...
I am working with an array of objects in JavaScript, like this: Arr = [0: {k;v}, 1: {k,v}] and so on, each containing numerous fields. The challenge I'm facing is in sending these objects to Django. I have attempted using JSON.stringify to send the ...
In my table list, I have multiple input fields with the jQuery datepicker implemented. Each input field is assigned the class "datepicker" and a unique ID number. When clicked on, the datepicker pops up allowing for date selection to be inserted into the f ...
When I pass a string parameter to a function, I expect the console to display "reff", but it is showing "undefined" instead. Here is the code snippet: var _ref; function foo(_ref='reff') { var bar = _ref.bar; return console.log(bar); } foo ...
I need help troubleshooting my JavaScript code that is meant to run on my homepage when it loads: $(".mm-page").css({"position":"inherit"}); I included this code at the bottom of my home.html.erb file: <% content_for(:after_js) do %> <scrip ...
Currently, I am attempting to iterate through a list of items and generate HTML code to be passed into the view file: const itemWrap = '<div id="items"></div>'; userDetails.notes.forEach(item => { const itemE ...
Is there a way to split a single .tiff file with multiple pages into several .png or .jpg files without using ImageMagick or GraphicsMagick due to limitations in my codebase? I am unable to install CLI tools so I'm exploring alternate solutions. I kn ...
My NodeJS/Express application utilizes Handlebars for templates, and everything works smoothly except when attempting to display data retrieved from an Express API. The data is successfully fetched and can be viewed in the Chrome debugger. In the problem ...
I am attempting to create a collapsible navigation bar using MaterializeCSS for mobile screens and I plan to incorporate JavaScript code into it. Can you advise where I should place this JavaScript code? Below is the snippet of code that I intend to inclu ...
Imagine having a search box that is displayed after the user clicks on a button. Great so far, right? But what if you want to add another feature - making the search box disappear when the user clicks anywhere else. How can this be achieved with AngularJS? ...
In search of draggable/sortable functionality for my .NET Razor Pages application. Came across the jQuery UI Draggable/Sortable component which I've used years ago with success. However, it's mentioned on the download page that the component is ...
Employing async.parallel to simultaneously run 2 functions, initiated from a static function within a mongoose model. In this code snippet (where the model contains a static function named verifyParent), I utilize this to access the model and its functions ...
While this topic is well-known, I have a slightly more complex question regarding it. I have gone through the documentation here. My goal is to display the date in French format (dd/mm/yyyy) and save the value in US format (yyyy-mm-dd). Additionally, I nee ...
I'm currently working on implementing a modal window in React, but I've encountered an issue where setting position: fixed results in the modal window's position being relative to the page rather than the browser window. For privacy reasons, ...
I have an array class called DocumentItemSelection with the syntax: new Array<DocumentItemSelection>. My goal is to extract only the documentNumber class member and store it in another Array<string>, while keeping the same order intact. Is th ...
I've been struggling to convert a nested array like the one below: var array = [ [['firstName', 'Henry'], ['codeName', 'Etta'], ['email', '<a href="/cdn-cgi/l/email-protection" class="__cf ...
After successfully laying out and creating my website, the next step is to load more results on scroll. This question has been posed numerous times before, but I am curious if there is a simple solution that can seamlessly integrate into my current setup. ...
What is the best way to display multiple variables in a table using a loop, such as i,j,k? this.state = { materials: ['m1', 'm2'], quantity: ['2', '4'], unitPrice : ['12&apo ...
I recently came across a document on Mozilla that described the try...catch conditional as "non-standard and is not on a standards track. Do not use it in production" However, I am curious to understand the reason behind this statement. I also want t ...