What is the process for implementing THREE.EdgesGeometry on a model imported using THREE.OBJLoader?

I have been attempting multiple times to add edges in a model loader using the OBJLoader, but I am unable to achieve it.

Mloader = new THREE.MTLLoader();
            Mloader.setPath( dir );
            Mloader.load( mtl_dir, function ( materials ) {
                materials.preload();
                OLoader = new THREE.OBJLoader();
                OLoader.setMaterials( materials );
                OLoader.setPath( dir );
                OLoader.load( name_file, function ( object ) {
                    object.scale.set( scale, scale, scale );
                    scene.add( object );
                    var edges = new THREE.EdgesGeometry( object, 11 );
                    var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( {color: 0x111111 } ) );
                    line.scale.set( scale, scale, scale );
                    scene.add( line )
                } );
            } );

The model loads correctly, however, the edges do not render as expected. When using the STLloader to load the model, the edges of the geometry render properly, but I need to accomplish this with .obj files.

var loader = new THREE.STLLoader();
loader.load(dir, function (geometry) {

material = new THREE.MeshPhongMaterial({
    color: 0xAAAAAA,
    specular: 0x111111,
    shininess: 200
});
var edges = new THREE.EdgesGeometry(geometry, 11);

var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0x111111}));   
line.scale.set(scale, scale, scale);

scene.add(line)

});

STL vs OBJ Loader

Answer №1

That's correct, it is a group. Here is the code solution provided:

Mloader = new THREE.MTLLoader();
            Mloader.setPath( dir );
            Mloader.load( mtl_dir, function ( materials ) {
                materials.preload();
                OLoader = new THREE.OBJLoader();
                OLoader.setMaterials( materials );
                OLoader.setPath( dir );
                OLoader.load( name_file, function ( object ) {
                    object.traverse( function ( child ) {
                        if ( child instanceof THREE.Mesh ) {
                            child.castShadow = true;
                            edges = new THREE.EdgesGeometry( child.geometry,11);
                            line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( {
                            color: 0x111111
                        } ) );
                            line.scale.set( scale, scale, scale );
                            line.position.set( 0, 0.7, 0 );
                            scene.add( line );
                        }
                    } );

                        object.scale.set( scale, scale, scale );
                        object.position.set( 0, 0.7, 0 );
                        scene.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

Arrange four Divs next to each other with flexbox styling

I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...

Struggling to retrieve an element from an object received through a get request in Express

I am facing an issue with a get request that returns an array of objects retrieved from a database using Knex. I am trying to use .map to make these objects accessible, but I am struggling with accessing the final element which is a sum(). It seems like a ...

Display requested tab feature using jQuery upon page load

I am new to jquery and have been using this code for creating tabs: <script type="text/javascript" charset="utf-8> $(function () { var tabContainers = $('div.tabs > div'); tabContainers.hide().filter(':first&apo ...

Modifying content on the fly with a dropdownlist in Knockout framework

Currently experimenting with implementing inline editing through knockout. I stumbled upon this informative thread about Knockout Inline Edit Binding After some tweaks to introduce a "Select" for edit mode, the functionality seems to be working fine. Howe ...

Selecting a color in Vuetify's color picker triggers the @

I have incorporated the Vuetify color picker into my project for changing the background and text colors of elements. Currently, I am storing the hex color values in Firestore by using the @input="updateColor" attribute on the v-color-picker to t ...

Stacking items when clicked on with jQuery UI Draggable

Can a draggable's stack procedure be activated by clicking instead of just dragging? I came across this solution, which essentially replicates the library code (with an important addition I included below). Is there a more elegant approach to achieve ...

Error in React UseTable: Attempting to read properties of an undefined object (specifically trying to use a forEach loop)

https://i.stack.imgur.com/ZSLSN.pngHaving an issue here that I need some quick help with! Whenever I attempt to render data into a React table, I encounter the error mentioned above. The data is fetched from an API using Axios. Let's take a look at t ...

How can I access an InputStream from a local XML file in a PhoneGap application?

Looking for advice on how to fetch an inputstream from a local XML file using JavaScript in my PhoneGap application. I'm new to JavaScript, so any guidance would be appreciated! ...

Select box in material design does not show an error when the value is empty

<md-input-container flex-gt-xs> <label translate>rule.type.title</label> <md-select name="type" ng-required="true" ng-model="vm.model.type" ng-change="vm.onRuleTypeChange(vm.model.type)"> <md-op ...

Escape from the chains of node.js then() statements

While working with a large amount of externally sourced data, I encounter situations where I need to interrupt the chain of commands and redirect the page. This is an example of my setup: Api file gamesApi.getAllResultsWithTeamInformation(passData) ...

What is the reason behind the necessity of using setTimeout with a delay of at least 50ms for JS .focus()

Problem While creating a page for a client at work, I encountered an issue with a slide-out search bar. When clicking the button to open the search input field (which starts off hidden), I want the focus to shift to that input field. Oddly, I found that ...

I'm having trouble with using setInterval() or the increment operator (i+=) while drawing on a canvas in Javascript. Can anyone help me out? I'm new

I am looking to create an animation where a square's stroke is drawn starting from the clicked position on a canvas. Currently, I am facing an issue where the values of variables p & q are not updating as expected when drawing the square at the click ...

There was a failure to retrieve any data when trying to send an ajax request to

When attempting to send JSON data to my PHP, I am not receiving any response when accessing it in my PHP code. Below is the Ajax request being made: var project = {project:"A"}; var dataPost = JSON.stringify(project); $.ajax({ url: 'fetchDate.p ...

display saved data from ajax request

I've been working on saving data and files using ajax. Following a tutorial (link), I managed to successfully save the data in the database and the image files in the designated folder. However, I'm facing an issue where the success or error mess ...

Sending data through ajax to PHP on separate pages is a common practice

Here is where I choose my preferred option Company Name<br /> <select id="company" name="selected"> <option value="">Option A</option> <option value="">Option B</option> </select> When I click this, a mo ...

Unveil the power of the "Enter" key with these jQuery hacks

Is there a way to prevent the Enter key from being counted as a character when disabling the submit button until something is entered in a TextArea? This functionality is achieved using the Count.js.coffee script. $(document).ready -> $(".cmnt_btn") ...

MVC3 does not support JQuery UI

Just recently, I had all my jquery-ui elements functioning perfectly. However, now it seems that none of the jquery-ui features are working anymore. In my Site.Master page, I have included the following code... <link href="../../Content/Site.css" rel=" ...

Vue js for filtering and replacing prohibited words

For this scenario, our objective is to screen the words in our input: <input type="text" class="form-control" placeholder="Write something..." v-model="todoInput""> Below are the restricted words that we aim to substitute in the input "restrict ...

How to extract query string parameters using node.js

I'm currently working on fetching query string parameters from a URL using the node.js restify module. This is an example of the URL I am dealing with: Here is the relevant code snippet: server.use(restify.bodyParser()); server.listen(7779, functi ...

Ensure the smooth scrolling feature is activated by adding an active class when either clicking or manually scrolling the

I have a script that enables smooth page scrolling, but I want it to automatically add an "active" class to the link corresponding to the section currently in view. While there are similar solutions out there, most of them only apply the class when the lin ...