How to paint different parts of the model

Questions
, ,
1

Hello, I have a gltf model of a house that I need to select the color for all walls, and separately select the color of the foundation. Can you tell me in what direction to go to realize this?

import * as THREE from ‘three’;
import {GLTFLoader} from ‘three/addons/loaders/GLTFLoader.js’;

import init from “./init.js”;

export function paintingHome() {

const {sizes, camera, scene, container, controls, renderer, mouse} = init();
let mesh, helper

camera.position.z = 3;


const floor = new THREE.Mesh(
    new THREE.PlaneGeometry(10, 10),
    new THREE.MeshStandardMaterial({
        color: '#444444',
        metalness: 0,
        roughness: 0.5
    })
);

floor.receiveShadow = true;
floor.rotation.x = -Math.PI * 0.5;
scene.add(floor);
scene.add(new THREE.AxesHelper(1));

const light = new THREE.AmbientLight(0xffffff, 1.75);
scene.add(light);

const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.position.set(0, 10, 0);
directionalLight.castShadow = true;

helper = new THREE.Object3D();


const loader = new GLTFLoader();
loader.load(
    '/static/assets/models/cottage/Cottage_1.gltf',
    (gltf) => {
        mesh = gltf.scene.children[0].children[0].children[0];
        console.log(mesh);
        mesh.scale.set(0.5, 0.5, 0.5);
        mesh.rotation.y = Math.PI / 3;


        scene.add(mesh);

    }
);

const tick = () => {
    controls.update();
    renderer.render(scene, camera);
    window.requestAnimationFrame(tick);
};
tick();

window.addEventListener('resize', () => {
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;

    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();

    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.render(scene, camera);
});

window.addEventListener('dblclick', () => {
    if (!document.fullscreenElement) {
        container.requestFullscreen();
    } else {
        document.exitFullscreen();
    }
});

}

2

You can swap color of the material by simply assigning a new value to the material.color property :thinking: (you can traverse the model and pick up materials per-child, just keep in mind that if your model reuses the materials, you have to clone the material before assigning a new color to a specific part of the model - otherwise the color will be changed to all instances of the specific material.)

1 Like