Tips on handling the vertices of an object that has been loaded using ObjLoader in Three.js

I have loaded an object in my scene using ObjLoader. However, I am struggling to read the vertices of that object. I can easily read and modify the vertices of a normal cube created in three.js, but it doesn't seem to work on the object loaded by ObjLoader. I even attempted to use FaceNormalsHelper, which worked on the cube but not on my object.

Here is the code snippet:

//Creating a cube (works fine)
var geometry = new THREE.BoxGeometry(20, 20, 20);
var color = new THREE.Color("rgba(188, 141, 190, 1)");
var material = new THREE.MeshNormalMaterial({color: color.getHex()});
var cube = new THREE.Mesh(geometry, material);

var helper = new THREE.FaceNormalsHelper(cube, 20, 0x00ff00, 1);
var vert = cube.geometry.vertices[1].y;

scene.add(cube);
scene.add(helper);

//Loading my object 
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {
    console.log(item, loaded, total);
};
var texture = new THREE.Texture();
var onProgress = function(xhr) {
    if (xhr.lengthComputable) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log(Math.round(percentComplete, 2) + '% downloaded');
    }
};
var onError = function(xhr) {};
var loader = new THREE.ImageLoader(manager);
loader.load('objects/texture.jpg', function(image) {
    texture.image = image;
    texture.needsUpdate = true;
});

var objLoader = new THREE.OBJLoader(manager);
objLoader.load('objects/scan_leg_repair.obj', function(object) {
    object.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.material.map = texture;
        }
    });

    object.position.y = -100;
    object.rotation.x = -1.5;
    object.rotation.z = 3;

    scene.add(object);

    //Below are the unsuccessful attempts
    //var vert2 = object.geometry.vertices[1].y;
    //var vert3 = object.children[0].geometry.vertices[1].y;
    //var helper = new THREE.FaceNormalsHelper(object, 20, 0x00ff00, 1);
    //var helper = new THREE.FaceNormalsHelper(object.children[0], 20, 0x00ff00, 1);
    //scene.add(helper);

}, onProgress, onError);

Thank you very much!

Answer №1

When using OBJLoader, the object created is of type THREE.group. This means you can access the vertices in the following manner:

object.children[0].geometry.attributes.position

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

Transferring a JSON object to a PHP script

I am attempting to send a JSON object with a structure like this: {"service": "AAS1", "sizeTypes":[{"id":"20HU", "value":"1.0"},{"id":"40FB","2.5"}]} Just to note: The sizeTypes array contains a total of approximately 58 items. Upon clicking the submit ...

cycle through several handlebars entities

Hey friends, I could really use your help right now. I'm attempting to iterate through these objects using handlebars. RowDataPacket { idUser: 1, username: 'xxxxxx', password: 'xxxxx', fullname: 'Julian Rincon'}, RowDat ...

Please wait for the window to finish formatting before attempting to print

I'm currently using the javascript code below to pass an element ID to a method. This method then formats that particular ID in a separate window and prints it. However, I've encountered an issue where the print dialogue box opens up before the w ...

What is the proper way to define the types for the lodash flow function in TypeScript?

lodash.flow is a powerful function that can combine two or more functions to create a new function. For example, using lodash.flow(double, addTwo) would result in a function that doubles a number and then adds two to it. However, when working with TypeScr ...

What is the reason behind Firefox failing to display a linear gradient when the background-size values are more than 255px?

I am working on creating a grid overlay using an absolutely positioned non-interactive div. My approach involves using the repeating-linear-gradient property as suggested by others for this purpose. The functionality works smoothly in Chrome, but I seem to ...

Adding the children of JSON objects to every individual div element

How can I add each day's players [day-1, day-2, day-3, day-3] wrapped in a <span> into the .card-body section as required? The goal is to load only four card-body. var vehicles = { "day-1": { "player-1-1": "Ford", "player-1-2": "BMW ...

Is there a quicker method to access an object's ID?

Within my array of objects, the structure is as follows: var locations = [ [{id: 1, lat: 51.52376322544537, lng: 5.13785702262885, content: 'Title A'}], [{id: 2, lat: 51.52358632767757, lng: 5.137921395645208, content: 'Title B'}], [{i ...

Polymer form failing to submit via AJAX in Firefox

My Form: <form is="iron-form" action="{{url('/user/store')}}" id="registerForm" method="POST"> <input type="hidden" name="_token" value="{{csrf_token()}}"> <paper-input name="email" label="E-mail" type="email"></pape ...

Configure vue.config.js to generate distinct pages based on different environments

Currently, I am utilizing Vue with webpack to construct a Multi-Page Application and have the following setup: pages: { index: { entry: ... template: ... ... } page1: { entry: ... template: ... ... } } I am looking to add a deb ...

Take action once the Promise outside of the then block has been successfully completed

Presented below is the code snippet: function getPromise():Promise<any> { let p = new Promise<any>((resolve, reject) => { //some logical resolve(data); }); p.finally(()=>{ //I want do something when ou ...

The webpage displays the element as <span class="icon">&#xe80d;</span> instead of rendering it properly

In my ReactJS project, I have created a component called Menu1item: class Menu1item extends React.Component{ render(){ return ( <div> {this.props.glyph}{this.props.value} </div> ) ...

Encountering NodeJs Error 401(Unauthorized) while implementing passport-jwt in my project

I am currently developing an authentication application using Node.js, MongoDB, and the Passport-JWT middleware. I have successfully implemented the login functionality and I am able to obtain a token. However, when trying to access the user profile after ...

When using the hasMany/belongsTo relationship in VuexORM, the result may sometimes be

I have carefully followed the documentation and set up 2 models, Author and Book. The relationship between them is such that Author has many Books and Book belongs to an Author. However, despite having the author_id field in the books table, the associatio ...

Activating/Deactivating Drop-down Menus Depending on Selected Options

I'm attempting to control the enable/disable functionality of two select boxes based on the user's selection in a third box using jQuery. The goal is to enable select box 2 when the user chooses one of the first two options in the controller, and ...

JavaScript / Ajax / PHP - A Minor Bug That's Bugging Me

I'm in need of some help, as I feel like I'm losing my mind right now. I've developed a code using php/js/ajax to verify if an email address exists when it's submitted. After testing the ajax, I can confirm that the correct values are ...

"Improving User Experience with React.js Serverside Rendering and Interactive Event Handling

Currently, I am in the process of learning how to utilize react.js but I am facing some challenges with using event handlers. Here's a question that has been lingering in my mind: Is it feasible to employ server-side rendering and automatically send e ...

Creating JavaScript code using PHP

In my current project, there is a significant amount of JavaScript involved. I'm finding that simply generating basic strings and enclosing them within "<script>" tags may not be the most efficient approach. What are some alternative methods fo ...

Using the toggle method or IF statements in JavaScript to implement show and hide functionality upon clicking

I’ve been struggling with this issue for days now. It seems like I may have overcomplicated a simple piece of code. I'm trying to show some divs when a button is clicked, but I’m having trouble getting it to work properly. Initially, I used VAR.st ...

Utilize a vacant implementation of an interface

I have a simple interface called EmployerContact. I'm wondering how I can create an empty object, mockEmployerContact, of type EmployerContact and then assign values to its properties later on. Do I need to start with default values for this object? e ...

Fetching the URL for the Facebook profile picture

Utilizing satellizer for authentication in a MEAN application. Once the authentication process is complete, I aim to retrieve the user's profile picture. Below is the code snippet that I am using: Angular Controller (function(){ 'use strict ...