Retrieve an object in Three.js using the objloader and its name

Question

Retrieve an object in Three.js using the objloader and its name

I've been struggling for weeks to manipulate OBJLOADED objects in a three.js scene using keyboard buttons. My goal is to translate and rotate the objects based on key inputs, such as pressing 'A' to translate objA along the X-axis and 'B' to translate objB.

function addObject(model) {
   var mtlLoader = new THREE.MTLLoader();
   var objLoader = new THREE.OBJLoader();

   mtlLoader.load(model+'.mtl', function (materials) {
    materials.preload();       
    objLoader.setMaterials(materials);

    objLoader.load(model+'.obj', function (object) {        
        object.name =model;
        scene.add(object);        
        // I'm struggling with returning an object here
    });
});
}   

var obj1 = scene.getObjectByName('objA');

if(obj1.name=='objA'){
    alert('Yes');
}

I can't seem to get this code to work as intended. Any suggestions or solutions would be greatly appreciated!

javascript three.js

Answer 1

Answer №1

To implement object interaction in your scene, you can create a map to store the objects you wish to work with.

var interactableObjects = {};

function addObjectToScene(model) {
   var mtlLoader = new THREE.MTLLoader();
   var objLoader = new THREE.OBJLoader();

   mtlLoader.load(model+'.mtl', function (materials) {
    materials.preload();       
    objLoader.setMaterials(materials);

    objLoader.load(model+'.obj', function (object) {        
        object.name = model;
        scene.add(object);        

        interactableObjects[model] = object;
    });
  });
}

addObjectToScene('modelA');
addObjectToScene('modelB');

function handleKeyPress(event) {
    switch(event.keyCode) {
        case 65:
            interactableObjects['modelA'].translateX(1);
            break;
        case 66:
            interactableObjects['modelB'].translateX(1);
            break;
    }
}

window.addEventListener('keypress', handleKeyPress);

Answer 2

To implement object interaction in your scene, you can create a map to store the objects you wish to work with.

var interactableObjects = {};

function addObjectToScene(model) {
   var mtlLoader = new THREE.MTLLoader();
   var objLoader = new THREE.OBJLoader();

   mtlLoader.load(model+'.mtl', function (materials) {
    materials.preload();       
    objLoader.setMaterials(materials);

    objLoader.load(model+'.obj', function (object) {        
        object.name = model;
        scene.add(object);        

        interactableObjects[model] = object;
    });
  });
}

addObjectToScene('modelA');
addObjectToScene('modelB');

function handleKeyPress(event) {
    switch(event.keyCode) {
        case 65:
            interactableObjects['modelA'].translateX(1);
            break;
        case 66:
            interactableObjects['modelB'].translateX(1);
            break;
    }
}

window.addEventListener('keypress', handleKeyPress);

Retrieve an object in Three.js using the objloader and its name

Answer №1

Similar questions

Discovering the method to extract a Specific Form Field value with JQuery

Tips for making a bookmark for your iframe content

The React Component is not displaying any content on the webpage

What measures does Redux take to ensure race conditions do not occur?

Swap information in one array with information from a different array

Encountering issues with installing @vue/cli on Linux Ubuntu

A method to transfer a floating point number from Python to JavaScript without using cgi

Text generated dynamically for buttons

Module not discovered by nodeJS within the current directory

Tips on changing a div HTML tag through a button's onclick event with javascript

Unexpected outcome observed with straightforward MongoDB MapReduce task

What is the best practice for naming variables in JavaScript?

I'm looking to incorporate a module from another component (Next.js, React.js) into my project

Transforming the JSON data into a text format

React-router is failing to redirect properly within a specific component

What is the best way to create messages that can function seamlessly in both Java and JavaScript environments?

Design an HTML form that includes checkboxes for selecting multiple values

employing the 'appendTo()' function within a child div nested inside a parent div

Guide to setting up Gatsby CLI and Gatsby version 2

Ways to show confirmation when the user presses the back browser button?