Instructions for positioning a 3d cube within another 3d cube with the help of three.js

I'm currently working on a project involving cargo management and I am looking to create a 3D image of the packing order. I am new to using THREE.js and need assistance in rendering the objects inside the container.

While I have the positions (x, y, z axis) and sizes of the objects and the container itself, I am struggling with placing the objects inside the container.

If anyone can provide guidance on how to achieve this, I would greatly appreciate it.

Below is the code snippet I have been working on:

init();
animate();

function init() {
    var aspect = window.innerWidth / window.innerHeight;
    // Rest of the initialization function
}
        
function animate() {
    renderer.render(scene, camera);
}

Currently, the code runs without any errors but does not display the desired result.

javascript3dthree.js

Answer №1

To properly arrange the objects, you must first make them children of the container and then position them accordingly.

// Start by adding the container to the scene
var geometry = new THREE.BoxGeometry(container_width, container_height, container_depth);
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var container = new THREE.Mesh(geometry, material);
scene.add(container);

// Next, add the objects as children of the container
var geometry_obj = new THREE.BoxGeometry(object_width, object_height, object_depth);
var material_obj = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var object = new THREE.Mesh(geometry_obj, material_obj);
// Adjust the position of the object within the container
object.position.set(object_position.x, object_position.y, object_position.z)
container.add(object);

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

Is it possible to programmatically hide the Textarea and submit button for each row in a PHP-generated database table?

After spending a considerable amount of time on this project, I'm looking to incorporate a JavaScript effect (hide/unhide) into a basic submit form. Although the functionality is successful, it seems to be limited to only one row in the database tabl ...

javascriptphphtmlmysql

What is the process for extracting a nested document from an array of documents in mongodb?

I am currently facing a challenge in my project where I need to remove a nested objects array within a document. The specific scenario involves searching for the days on which an event will be held, based on its event ID. const { eventid, typesOfTicketId ...

javascriptarraysnode.jsmongodbmongoose

Exploring the concept of try-catch in JavaScript with a focus on the call stack within the Node

Recently, I delved into the world of Javascript and decided to explore how stack tracing functions in nodejs. Instead of looking at the source code, my lazy side led me to consult the language reference found at https://www.ecma-international.org/ecma-262/ ...

javascriptnode.jstry-catchread-eval-print-loop

Error encountered: "XPathEvaluator is not defined" when using IEDriverServer and Internet Explorer with Selenium and Java in Microsoft Dynamics CRM

As part of my testing process for a CRM application with Selenium Java, I encountered an issue with a button that opens a new window. When executing the test, a Script Log Error appears in the new window stating, ReferenceError: 'XPathEvaluator&apo ...

javascriptjavaseleniumdynamics-crminternet-explorer-11

Passing props to child components in Next.js: A step-by-step guide

I am currently working with my index.js page, which incorporates a layout component: import Layout from "../components/layout"; export default function Home({posts}) { console.log(posts) return ( <Layout posts={posts}> & ...

javascriptreactjsnext.js

What is the significance of having nodejs installed in order to run typescript?

What is the reason behind needing Node.js installed before installing TypeScript if we transpile typescript into JavaScript using tsc and run our code in the browser, not locally? ...

javascriptnode.jstypescriptangularnpm

Having trouble setting up the next-auth login page and experiencing issues with the getProviders() function

Greetings to all fellow web developers, I am currently working on a Next.js application that utilizes next-auth for user authentication. I have set up the [...nextauth].js file in the "pages/api/auth" directory and a signin.js file in the "pages/auth/" di ...

javascriptreactjsnext.jsnext-auth

Using Express.js to send a response while simultaneously executing a background task

When working with Express.js, I have a need to execute a task after sending a response. My main goal is to minimize the response time and send back the response immediately without waiting for the task results to be returned to the client. The task itself ...

javascriptnode.jsexpress

Trouble with Updating Div Content?

Within my HTML code, I have included this JavaScript snippet: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script> var auto_refresh = setInterval( function() { $('#loaddiv').fadeOut ...

javascriptjqueryhtml

Reviewing file information prior to submission

Is there a way or method we can utilize to validate file details (extension and size) before the form is submitted by the user? I have limited knowledge of jQuery or JavaScript, so please provide detailed assistance if that is the solution. I envision tha ...

javascriptjquery

How to pass children and additional arguments to a React/NextJS component

Currently, I am utilizing NextJS with a global PageLayout wrapper that is responsible for setting the head and creating the wrapping divs for all my pages. However, I am facing a challenge as I attempt to set a custom title tag for each page. This task req ...

javascriptreactjsnext.js

Tips for transferring information to a textarea within a bootstrap modal by selecting a cell in a table

I need to enable users to edit information in a table. One cell in the table contains text. Here is an excerpt from the table: <table class="table table-striped table-hover" id="table_id"> <thead> <tr> <th>Event</th& ...

javascriptjquerytwitter-bootstrapbootstrap-modal

The render of Javascript is not functioning properly in Chromedriver

For website testing in VisualStudio, I planned to use Selenium with Cromedrive. Unfortunately, I encountered difficulty in seeing items generated by Javascript on the page. It appears that chromedriver captures the pagesource before the JS has a chance to ...

javascriptc#seleniumselenium-chromedriver

Items seem to vanish into thin air and become immovable when attempting to relocate them

I am attempting to create a unique grid layout with 3x3 dimensions, where each grid item represents a fragment of a single image. These items should have the capability to be dragged and dropped inside another 3x3 grid, in any desired sequence. I have hit ...

javascripthtmlcssdrag-and-dropgrid

Combining two collections in MongoDB and calculating the total number of documents

I'm seeking guidance on working with mongodb and node.js. I currently have a collection called PIZZA { title: "bacon" } { title: "pepperoni" } as well as another collection named ORDERS { orderid: 1, pizza: "bacon" } { orderid: 2, pizza: "pepperoni ...

javascriptnode.jsmongodbcollectionsunion

How can you prevent the browser from prompting to save your email and password when filling out a sign-up form?

I'm currently developing a PHP sign up form, but whenever I click on the sign up button, the browser prompts me to save the email and password. Is there a way to prevent this from happening? ...

javascriptphpjqueryhtml

Access and retrieve dynamically generated table row values with the use of AngularJS

Hi, I'm new to angularjs and I have a table where I need to dynamically add rows. I've got everything working with a bit of JQuery but I'm having trouble getting the value of dynamically created table rows. Here's my code, can someone p ...

javascriptjqueryangularjs

Using Javascript to organize an array of objects based on a specific condition

Having an array of objects structured as follows: obj = [{'name': 'Tom', 'age': 17, 'gender': 'male', 'color':'red', 'position':3}, {'name': 'Sam', ...

javascriptarrayssortingjavascript-objects

JavaScript code altered link to redirect to previous link

I added a date field to my HTML form. <input type="date" name="match_date" id="matchDate" onchange="filterMatchByDate(event)" min="2021-01-01" max="2021-12-31"> There is also an anchor tag ...

javascripthtml

What is the best method for constructing an array of sets using Raphael?

This code snippet creates a total of 48 squares, each labeled with a number from 0 to 47 within them. Utilizing sets is the recommended method for achieving this on stackoverflow. By grouping the rectangle shape along with its corresponding number, it allo ...

javascriptjqueryarraysraphael