Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Three JS loop through materials

I want to search for the material called COIN and assign a new texture to it. I know it’s material number 0, but what I want is to search through the materials and if it finds a name match, assign the texture.

object.traverse( function( node ) {
  if (node.isMesh) {
    if ( node.material[0].name == 'COIN' ) {
      node.material = textura
    } 
  }
})
// Works perfect

Looking something like:

if ( node.material[].name == 'COIN' )
// Error

How can I loop through the object’s textures to find the one I’m interested in without knowing the material index?

Just in case it matters, the object format is FBX.

Thanks!!!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found a solution on the spanish stackoverflow:

    object.traverse( function( node ) {
  if (node.isMesh) {
    node.material.forEach((material, index) => {
      if (material.name === 'COIN') {
        node.material[index] = textura;
      }
    });
  }
});

  2. 0

    …but what I want is to search through the materials and if it finds
    a name match, assign the texture.

    You can use the .getObjectByName method and work with parts using it.

    Look here

    For example you can search one part:

    const torso2 = model.getObjectByName('Torso_3');

    or arrays of parts

    const partsRobo = ['Torso_1', 'Torso_2', 'Torso_3'];

    Example:

    *{margin:0;}
    <script type="importmap">
  {
"imports": {
  "three": "https://unpkg.com/[email protected]/build/three.module.js",
  "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
  }
</script>

<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;

const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10).normalize();
scene.add(directionalLight);

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('https://media.craiyon.com/2023-11-26/2ets6-v1SVGOdKAtPxmlMw.webp');
texture.flipY = false;

const loader = new GLTFLoader();
loader.load('https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb', function (gltf) {
  const model = gltf.scene;
  model.position.set(0, -2, 0);
  scene.add(model);
  const torso2 = model.getObjectByName('Torso_3');
  if (torso2) {
    torso2.material = new THREE.MeshStandardMaterial({
      map: texture
    });
  }
});

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});


</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search