Load a 3D object or model using three.js and then make modifications to its individual components

Seeking advice on displaying and manipulating a 3D model of a robot arm in a browser. How can I load the model into three.js to manipulate all the sub-parts of the robot arm?

Using Inventor, I have an assembly of a rotary motor and a shaft exported as an STL file and imported into Three.js using STLLoader.js.

My goal is to manipulate the shaft to turn to a specified angle. Here is the code I have used to load the model:

<div id="container"></div>

    <script src="three.js\build\three.min.js"></script>
    <script src="js\STLLoader.js"></script>

    <script>
        // Set size variables
        var SIZE_x = 400, SIZE_y = 400;

        // Set three main THREE variables
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, SIZE_x/SIZE_y, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();

        // Set renderer options
        renderer.setSize(SIZE_x, SIZE_y);
        renderer.setClearColor(0xEEEEEE, 1.0);
        renderer.clear();

        // Append to HTML Dom
        $('#container').append(renderer.domElement);

        // Create light
        var pointLight = new THREE.PointLight(0xFFFFFF);
        pointLight.position.x = 10;
        pointLight.position.y = 50;
        pointLight.position.z = 130;            
        scene.add(pointLight);

        // Move camera
        camera.position.x = 0;
        camera.position.y = 20;
        camera.position.z = 20;

        var loader = new THREE.STLLoader();
        loader.addEventListener( 'load', function ( event ) {
            var geometry = event.content;

            var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533 } );
            var mesh = new THREE.Mesh( geometry, material );

            scene.add( mesh );

            mesh.traverse(function ( child ) {
                console.log("Hej: " + child);
            });

            console.log('Loaded');
        } );
        loader.load( 'models/AssemblySimple1.stl' );

        // Render loop
        var render = function () {
            requestAnimationFrame(render);

            camera.lookAt(scene.position);
            renderer.render(scene, camera);
        };

        render();
    </script> 

Any advice on the points mentioned above and suggestions on the preferred export file format are appreciated. Your thoughts on other ways to approach this problem are also welcome.

Thank you

Answer №1

When using Three.js, there is a handy function known as THREE.STLLoader() that allows you to load STL files with ease. Here is a simple example of how to load an STL file:

var loader = new THREE.STLLoader();
var group = new THREE.Object3D();
loader.load("../lib/SolidFz.stl", function (geometry) {
    console.log(geometry);
    var mat = new THREE.MeshLambertMaterial({color: 0x7777ff});
    group = new THREE.Mesh(geometry, mat);
    group.rotation.x = -0.5 * Math.PI;
    group.scale.set(0.6, 0.6, 0.6);
    scene.add(group);
});

The "scene" in this case is created as follows:

var scene = new THREE.Scene();

Once you have loaded your 3D object and added it to the scene, you can manipulate it as desired. This method allows you to load multiple parts and customize them to suit your needs.

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

Generating a highchart by retrieving JSON data using AJAX

I'm currently working on generating a basic chart on a webpage using data from a MySQL database that is fetched via a MySQL script. My main challenge lies in understanding how to combine the ajax call with the necessary data for the chart. I'm n ...

Tips for posting images upon clicking a div instead of a submit button

I previously had a code that allowed users to click on the submit button and have the text inside a contenteditable div passed to upload.php using JQuery, inserted into a database, and immediately displayed. Now, I want to modify this code to also handle i ...

Why is my element still occupying space even though it has been hidden with a display of none?

Currently, I'm working on a dropdown navigation menu where one of the list items causes space issues when the display property is set to none. Specifically, the 'Book A Table' item isn't meant to be visible in the center div when the sc ...

How can we display a different navbar based on whether the user is logged in or not?

Can anyone share the most effective methods for displaying a different navbar based on whether or not a user is logged in? I have considered a few approaches: One option might involve creating two separate navbars in the HTML file and using CSS to tog ...

Guide on transferring href parameter from the parent Vue component to the child component

Hey there! I've been working on creating a Vue page, breaking it down into components, and populating it with content from json. It all seems pretty straightforward, but I've hit a snag. Why is the href parameter not showing up in the right place ...

Adding my 'no' or 'id' in a URL using a JavaScript function can be accomplished by creating an onClick event

Here is the function I'm working on: function swipe2() { window.open('edit.php?no=','newwindow') } This is part of my PHP code (I skipped some lines): for ($i = $start; $i < $end; $i++) { if ($i == $total_results) { ...

The jQuery window.load() function fails to execute on iOS5 devices

I added a basic loading div to my website that fades out once the entire page has finished loading. The code I used is simple: $(window).load(function(){ $('#loading').fadeOut(500); }); While this works well on all desktop browsers and Chro ...

Find similarities and differences between two CSV files

Dealing with 2 large files, both exceeding 1 million rows: The first file contains only an md5 hash The second file contains pairs of md5 and email addresses My task is to compare these two files and if the md5 hashes match, write the corresponding emai ...

Conflicting issues with jQuery's load() method

I am facing an issue with loading two HTML pages into a single div. I have index.html and try.html in the root folder, where try.html is loaded into index.html's div (#content) when Button 01 is clicked on index.html. The problem arises when I further ...

Sliding the container with a width adjustment and left margin fails to display all images

In the provided HTML code below, there is a functionality to move images horizontally by clicking on buttons: $(document).ready(function() { calculate_width(); $('#moveleft').click(function() { var loga = $('#marki #loga'); ...

The Textfield component in Material UI now automatically sets the default date to the current date when using the "date" type

I am using Material UI's textfield with the type set to "date" and I'm experiencing an issue where the date defaults to the current date instead of mm/dd/yyyy. Is there a way to prevent this behavior and display mm/dd/yyyy when the user loads the ...

Sift through JavaScript problems

My goal is to implement a filtering function on my input that will display a different result. However, I have encountered an issue where the this.data.stationInfo.stations array is being changed, as shown in the console.log output. According to the Mozil ...

Angular directive does not focus on the text box

I've been working on creating text boxes using a directive and I want only the first text box to be in focus. To achieve this, I am utilizing another directive for focus control. Below is my script: <script> angular.module('MyApp',[]) ...

Saving the content of a div as a PDF

There are several aspects to consider when it comes to this question, but I'm having trouble finding the information I need. Hopefully someone can provide an answer. Essentially, what I want to achieve is: Imagine a div that is 400 X 400 px in size. ...

Seamlessly replacing an image in PixiJS without any sudden movement

I'm currently developing a HTML5 JavaScript game with a heavily textured background. My goal is to incorporate a 3D background element that can be swapped out dynamically. For example, the initial scene may show a room with a closed door, but once a J ...

Is extracting the title of an image from Flickr?

I have a JavaScript code that randomly pulls single images from Flickr every time the page is refreshed. Now, I want to add a feature where the title of the image is displayed when it's hovered over. However, I've been searching for a solution fo ...

My table elements are automatically being populated with <tr> elements thanks to Javascript

Upon viewing the screenshot: https://i.sstatic.net/Pwv2v.png it is evident that each element is placed within its own tr. My preference is to have each element contained in a td and then wrap everything within a single tr. Here is the updated HTML stru ...

Coloring weeks in fullcalendar's two-shift calendar

Can FullCalendar create a calendar with alternating colors for odd and even weeks? Visit the FullCalendar demos here For example, see image below: https://i.sstatic.net/D5qza.png ...

Establish the starting rotation for OrbitControls()

After setting an initial roll, pitch, and yaw for my camera, I successfully update the camera rotation with the appropriate values. However, when I create and update the OrbitControls(), the values get lost, and I am unable to find a way to set the initia ...

Having trouble retrieving the global variable within a while loop

I'm facing a challenge while working on this coding problem. It seems that I can't access the global variable within the while loop, as it returns undefined whenever I try to do so. function calculateSum(arr1, arr2, arr3) { let sum1 = 0; l ...