Using jsartoolkit and three.js to generate immersive 3D worlds

Currently, I am focusing on my graduation project. I have created a basic JSARToolkit webpage that can identify markers and overlay objects on them.

For my main project, I plan to accurately measure the walls located behind the speakers and calculate their theoretical resonances.

My idea is to place markers on the walls (on the right, left, bottom, and top), use JSARToolkit to detect them through the camera, and utilize their transformation matrix to create planes with three.js on the canvas. My next challenge is to find the intersections of these planes in order to establish a 3D space and obtain precise measurements of the walls positioned behind the speakers.

Once I have determined the dimensions of the walls, my next goal will be to determine the positions of the speakers within the space. This is a complex task that I understand will require significant effort, so any assistance or guidance would be greatly appreciated. Thank you for your attention.

Answer №1

If you're looking for a quick solution to capture a room, consider using an off-the-shelf room scanning device like the Structure Sensor. With just 20 seconds of manual scanning, you can export the mesh as an .obj file and easily load it into Three.js without needing any additional developer tools. This approach will efficiently handle both the walls and speakers in one go.

Alternatively, if you want to work with your current setup, place cubes on each marker in the room and add them all to your Three.js scene. Then, use the code

new THREE.Box3().setFromObject(myScene)
to calculate the bounding box that encompasses all 6 cubes. This bounding box essentially represents the boundaries of your room.

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

How to Set a PHP Array in an HTML Field and Send it to jQuery after Using json_encode?

When working on setting an array with PHP in an HTML input field and then sending it to a jQuery function, I encountered some issues. To resolve the problem, I decided to use json_encode for sending the array. However, rendering was hindered due to charac ...

What is the best way to obtain the present date in Nuxt directly from the server?

While conducting code tests, I realized that I required the current time from the server to run the tests effectively. In JavaScript, you can easily obtain the current date on the client side using the command: new Date();. However, when working with Nuxt ...

Using jQuery, compare the values of two elements and update the class based on the comparison outcome

My objective is to retrieve data from a database, place it into an <li> element, and then highlight the larger of the two values obtained from these HTML <li> elements. I have created a jsfiddle, but I am uncertain about how to use the addCla ...

in javascript, how can you access the value of a parent object within a nested object?

Within the material ui framework, I am utilizing the createMuiTheme function to create a theme. How can I access the values of the parent object within a nested object? (I am aware that I can declare global variables above the function); To better unders ...

The REST service in wcf 3.5 is compatible with XML response format, however it is not currently supporting

I currently have a service contract with multiple operation contracts defined. Recently, I added a new endpoint to expose my operations as a RESTful webservice. Additionally, I made updates to the operation definitions so that they can be invoked in a REST ...

Is there a way to verify the textbox value in MVC without the need for clicking submit or performing a postback

Exploring MVC for the first time. I am working on a Registration Form with 10 textboxes for id, name, address, etc. I need to validate if the entered Id is already in the database and display the status without requiring the user to click a submit button. ...

Developing view logics in Angular using ng-grid/ui-grid

Exploring the possibilities of creating a grid with advanced features such as filtering, resizing, scrolling, fixed headers, row formatting, and cell formatting using AngularJS. After reviewing various grids documentation, I have come across the following ...

The event handler is not defined and is failing to recognize in the React context

Currently, as I delve into the realm of learning React, I find myself facing a perplexing issue regarding the mysterious undefined state of this event handler. Why is it behaving in such an enigmatic manner? const Login = () => { handleSubmit = (e) ...

Generating and saving a text file in a React Native application

Is there a way to convert a string into a text file within the client application and then download it directly onto a phone? If so, how can this be achieved? ...

Saving div data to a database using Ajax techniques

I have a project where I need to store div content in a database. The content looks like this: <span>name:</span><input type="text" id="inputid" value="John"><br /> To fetch this content successfully, I used innerHTML method and s ...

Change the image displayed when hovering over the div containing it

I've come to a roadblock while attempting to change an image when hovering over its containing div. I could achieve this using CSS, but I have 6 divs with 6 images inside them. If I were to use CSS, I'd need 6 sets of hover events to swap the ba ...

Using AngularJS $http.get method returns JSON with numeric keys, but we actually do not want any keys

Currently, I am conducting local testing on an AngularJS website. The issue I am facing involves parsing JSON data using the $http.get method from a local JSON file. When I manually define the JSON within my controller, everything works smoothly. However, ...

Display an image from the API that rotates when hovered over with the mouse

Currently, I am fetching data from pokeapi.co and dynamically inserting it into a table. This data includes various stats and an image. My goal is to make the image rotate when hovered over. While creating the table, I added an id="pokeImage" dynamically. ...

Creating a URL using input fields with JavaScript or jQuery

I'm currently working on developing a form that acts as a URL builder using JavaScript or jQuery. The main concept behind this form is to take the user-input values from two fields, combine them with a preset URL structure, and display the resulting ...

Trimming Picture on User's Device

Currently, I am utilizing the jQuery ImgAreaSelect 0.9.10 plugin to crop images that are uploaded by users. The data input format being used is "multipart/form-data". Upon cropping an image with the plugin, it provides me with coordinates in pixels. Howev ...

Error: The THREE.GLTFLoader encountered an unfamiliar extension named "KHR_materials_pbrSpecularGlossiness"

An issue arises when attempting to load .glb files into three.js using GLTFLoader, as the model displays without textures and a warning stating "THREE.GLTFLoader: Unknown extension "KHR_materials_pbrSpecularGlossiness"" is generated. Interestingly, the mod ...

Passing parent HTML attributes to child components in Angular 2

Is there a way to pass HTML attributes directly from parent to child without creating variables in the parent's .ts class first? In the sample code below, I am trying to pass the "type=number" attribute from the parent to the app-field-label component ...

Guide to transform HTML into JSON with PHP

If you need to convert JSON to HTML, the JsontoHtml library can help. Now you want to convert existing HTML to JSON, and the following script was found: <script> $(function(){ //HTML to JSON $('#btn-render-json').click(function() ...

There was a SyntaxError that was not caught, due to an invalid left-hand side expression in a

I'm feeling really lost and would appreciate some help. Can someone explain why...? true++ This code snippet produces... "Uncaught SyntaxError: Invalid left-hand side expression in postfix operation" However, if we try... undefined++ W ...

Assign individual heights to multiple iFrames according to their content's height

Dealing with multiple iframes on a single page. Each iframe is sourced from my domain. The goal is to automatically calculate and set the height of each iframe on the page. The current code sets all iframe heights to match that of a specific iframe: fun ...