Three.js - 更新 Object3D 的网格颜色

Question

I have a Three.js Object3D that I would like to update the colour of.

I originally construct the Mesh using a MeshStandardMaterial and add it into the scene. Later, I look up this object by ID and retrieve an Object3D from the scene. How can I update the colour of the Mesh at this point - is it possible?

If I have to delete the 3D object and add an entirely new one - is there a way to retrieve the geometry that was originally used to construct it from the Object3D itself? I would rather not store a mapping of the original geometry to an object's ID, as this would make the code messy. One option I can think of is to store the geometry on Object3D.UserData , but this is again suboptimal as currently the Meshes are constructed elsewhere - and then added to the scene (user data is available only once it has been added to the scene).

Answer 1

I find a way to add texture into a Object3D .

You can map children property to update material of meshes.

    function onLoad(object) {
      // `children` is an array of `Mesh` than contain 1 or more Meshes
      object.children.forEach((mesh) => {
        if (!mesh) return;
        const material = mesh.material;

        material.map = ghostColorTexture;
        material.normalMap = ghostNormalTexture;
      });
    }

    const objLoader = new OBJLoader();

    objLoader.load(
      '/models/ghost/model/ghost.obj',
      onLoad,
      undefined,
      function (error) {
        console.error('error', error);
      }
    );

Answer 2

An Object3D can be a Mesh that's composed of a Geometry and a Material . If you want to update the color, simply select that material, and assign a new color to it:

object.material.color.setHex(0xff9900); // Sets to orange

In the docs, you can see that .color is a property of MeshStandardMaterial and .material is a property of Mesh