Find the 3D object's Axis using Three.js

Is there a way to determine the X, Y, and Z axis values of a three-dimensional object in Three.js? Here is the code I am currently using:

<html>
<head>
    <title>three Demo</title>
</head>
<body>
    <script src="three.js"></script>
    <script src="STLLoader.js"></script>
    <script src="Detector.js"></script>
    <script>
        if (!Detector.webgl) {
            Detector.addGetWebGLMessage();
        }
        var container;
        var scene, renderer, camera, cameraTarget;
        init();
        animate();
        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);
            var img_width = 250;
            var img_height = 300;
            var viewAngle = 45;
            var aspectRatio = img_width / img_height;
            camera = new THREE.PerspectiveCamera(viewAngle, aspectRatio, 0.1, 1000);
            camera.position.set(300, 450, 300);
            cameraTarget = new THREE.Vector3(0, 0, 0);
            scene = new THREE.Scene();
            scene.fog = new THREE.Fog(0x72645b, 2, 15);

            var light = new THREE.DirectionalLight(0xffffff, 1);
            light.position.set(0, 300, 300);
            scene.add(light);

            scene.add(new THREE.AmbientLight(0x555555));

            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setClearColor(scene.fog.color);
            renderer.setSize(img_width, img_height);
            document.body.appendChild(renderer.domElement);

            var stl_loader = new THREE.STLLoader();
            stl_loader.load("Bird_cage.stl", function (geometry) {

                var material = new THREE.MeshPhongMaterial({color: 0xff5533, specular: 0x111111, shininess: 200});
                var mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(0, -0.25, 0.6);
                mesh.rotation.set(0, -Math.PI / 2, 0);
                mesh.scale.set(0.5, 0.5, 0.5);

                scene.add(mesh);
            });
        }


        function animate() {
            requestAnimationFrame(animate);
            render();
        }

        function render()
        {
            var timer = Date.now() * 0.0005
            camera.position.x = Math.cos(timer) * 3;
            camera.position.z = Math.sin(timer) * 300;
            camera.lookAt(cameraTarget);
            renderer.render(scene, camera);
        }



    </script>
</body>

http://jsfiddle.net/80ozg046/

I have used this HTML to load an STL file and convert it into a three-dimensional object using Three.js. Now I need help finding the X-Axis, Y-Axis, and Z-Axis values. Any suggestions on how to solve this problem would be greatly appreciated.

Answer №1

Upon further examination, it appears that the original boundingBox is displaying as null, but there seems to be an obscure Helper available now.

     var helper = new THREE.BoundingBoxHelper(mesh, 0xff0000);
    helper.update();
    // To display a visible bounding box
    scene.add(helper);
    // If only numerical values are required
    console.log(helper.box.min);
    console.log(helper.box.max);

http://jsfiddle.net/MasterJames/n65v8bz9/3/

You can then compare the sizes of the two large and small objects you wish to align before scaling them accordingly.

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

Renovating code with the .catch(handleError) function leads to an UnhandledPromiseRejectionWarning

I need to refactor my catch block to use a common approach for multiple requests, but I am encountering an UnhandledPromiseRejectionWarning: ReferenceError: next is not defined. Below is a snippet of the code. user.save() .then(user => { }) ...

Breaking apart values separated by semicolons in JavaScript to create separate rows with additional information

Here is the provided data: result = [ { "Id":"0012v00002InPVmAAN", "Test__c":"India; Africa; Mombasa", "Test1__c":"AFR; TFR; GFR" } ] I want to convert the above data into a CSV file by splitting t ...

Using AngularJS to Send Elements to Scripts and Selectors

When I use the following template: <div id="container"> <textarea name="message"></textarea> <button value="send" ng-click="testMethod($parent)"> </div> In the JavaScript code: $scope.testMethod = function(element) ...

React progress bar that changes dynamically

Dynamic Progress Bar: state = { progress: 0, } render() { return ( <Progress value={this.state.progress} title="Saving the details"/> ); I am looking for a way to dynamically increase the progress bar over time. Can someone assist me wi ...

Avoid the situation where the prop overrides the existing data

I am facing a challenge with vue.js as a beginner. I have an array filled with objects that I send through props to my router-view. Within one of my router-view components, I am using this array in multiple functions by referencing it with 'this.data ...

How can I apply a rectangular mask to an SVG image in d3?

Is there a way to mask an SVG image with a gray background rectangle using d3.js v5 in order to display a different color partially? I am having trouble achieving this effect. SVG <?xml version="1.0" encoding="iso-8859-1"?> <! ...

Converting an array into a JSON object string using the map method

This is the response I received from my server. var my_data = [{"1":"1"},{"2":"8"},{"4":"13"},{"5":"19"},{"6":"22"}]; //data from the server I am looking to transform it to look like var new_data = { 1 : "1", 2 : "8", 4 : "13", 5 : "19" , 6 : "22"} How ...

Passing data back from an asynchronous function to its parent function in Node.js

Exploring the world of asynchronous programming is a new adventure for me as I delve into implementing Twilio video calls through Node.js. I've been grappling with calling a server-side function that in turn invokes another asynchronous function retu ...

What is the process of setting up a subelement in a Vue array?

I am currently working on incorporating an array read feature using Vue.js: {{ this.locations[this.record.carton.LocationID - 1].Location }} Although the code functions properly during runtime, it throws an error upon initial loading: app.js:55125 [Vue wa ...

The readFile function is not executing within a while loop

My goal is to send the updated contents of a text file over a socket connection using Express every time the file gets updated: console.log('Server running!'); var express = require('express'); var app = express(); var server = app.li ...

navigate a specific web address using Express routing

Is there a specific regex pattern that should be used in an Express application to match a URL? For example, if the endpoint is www.mydomain.com/v1/https://www.url-to-be-matched.com. I am aiming to accept https://www.url-to-be-matched.com as parameters. H ...

Tips for showcasing the dynamic legend in a line graph

Within my project, the legend is being displayed dynamically. However, I am looking to showcase names such as "student-marks" and "studentannualscore" instead of numerical values like 0, 1, 2, etc. Currently, the values are appearing as numbers (e.g., 0 ...

Loading fonts in React Native without using Expo

Utilizing expo-font, we have the capability to render fonts asynchronously during the app loading process. Here is a demonstration. Similarly, let's explore how we can achieve font rendering without relying on expo. import {AppLoading} from ' ...

Perform a function in jQuery only after the previous one has finished running in a cascading manner

Looking for guidance from an expert on how to accomplish this task. I have HTML code for a multiple choice question with options A to E: <div id="correct-answer-XXXXX" style="display:none;"></div> <div id="wrong-answer-XXXXX" style="display ...

Detect the element that initiated the AJAX call in Jquery event handling

My goal is to capture the beforeSend event for all form submits on my site without interfering with jquery.unobtrusive-ajax.js. I've attempted the following method: $(document).on("ajaxSend", function (e, request, settings) { console.log ...

Combine functions from two objects that share the same properties into an array for each property

I need help combining the methods from two objects into one, resulting in an array of methods for each property in the parent object: obj1 = {"prop1":"method1","prop2":"method2"} obj2 = {"prop1":"method3","prop2":"method4"} Expected result: obj1 = {"pro ...

What are the steps to integrating a repository into the clean architecture design pattern?

I have been following Uncle Bob's clean architecture principles in developing my medical application's API. However, I am facing some challenges in determining where certain components should be implemented. Within my application layer, I have a ...

Generating a JavaScript variable linked to a Rails Active Record relationship

I'm trying to implement an active record association in the DOM, but I'm encountering some difficulties. Here is my editor class: .editing .row .col-sm-3 .col-sm-8 .text-left #font-20 .title-font . ...

npm ERROR! Dependency parsing failed on macOS

I am currently supporting the interview preparation repository found at https://github.com/gaylemcd/ctci/tree/master/javascript/lib/data-structures My goal is to crack interviews for a JavaScript position The use of mocha and chai in the process has led me ...

Unchecking and checking the radio button is necessary in order for it to function properly

Today, I'm puzzled by the odd behavior of my radio buttons in a pixel drawer project. In order for the radio button to function properly, I have to uncheck it and then recheck it. The pixel drawer allows me to change colors and sizes using these radio ...