Three.js 颜色更改不会在 instanceColor 设置上恢复

Question

我目前正在开发一个已加载的 ifc 模型，该模型具有一些自定义属性。我有一个搜索字段，我的目标是应用程序的用户可以在该字段中输入自定义指示符，并且该元素将闪烁以在屏幕中识别。

我成功实现了搜索字段和元素的识别。这是相关的搜索功能：

function performSearchIfc() {
    let searchInput = document.getElementById("uuidsearchinput").value;
    let expressId = designatorToExpressId.get(searchInput);
    let arrayOfParts = loadedFragmentsGroup.data.get(expressId)[0];

    console.log(arrayOfParts);

    for (let i = 0; i < arrayOfParts.length; i++) {
        let partId = arrayOfParts[i];

        let children = loadedFragmentsGroup.children;
        let item = children.find(item => item.id === partId);

        if (!item) {
            console.log("Skipping item: " + partId);
            continue;
        }

        console.log(item);

        (async () => { //Something doesnt work with the colors - scale works
            try {
                let r = item.instanceColor.array[0] + 1 - 1;
                let g = item.instanceColor.array[1] + 1 - 1;
                let b = item.instanceColor.array[2] + 1 - 1;
                let copyOfOrigColor =  new Float32Array([r, g, b]);

                let intenseGreen = new Float32Array([0, 1, 0]);

                while (true) {
                    console.log("Setting color to " + intenseGreen);
                    item.instanceColor.set(intenseGreen);
                    item.scale.set(2.2, 2.2, 2.2);
                    await sleep(1000);
                    console.log("Setting color to " + copyOfOrigColor);
                    item.instanceColor.set(copyOfOrigColor);
                    item.scale.set(1, 1, 1);
                    await sleep(1000);
                }
            } catch (error) {
                console.error(error);
            }
        })();

    }
}

有趣的是眨眼的行为。我的东西工作得很好，属于我的标识符的元素被找到并得到了完美的解决。有效的是我改变了对象的比例，并且颜色也设置为亮绿色。控制台的输出符合预期：

但是，由于某种原因，将颜色重置回旧颜色不起作用。元素保持绿色。

谁能解释一下吗？

编辑：

发布后不久，我注意到有时只有部分变成彩色，然后看起来像这样：

所以这种着色方法似乎完全不靠谱。

Answer 1

instanceColor

属性代表实例的颜色，并不意味着可以这样进行编辑。

您可以在文档中阅读更多内容

因此，您需要致电

item.setColorAt(index, color)

，一旦您这样做，您就致电

item.instanceColor.needsUpdate = true;

index

是实例化网格的索引（在您的情况下可能是

i

），

color

是

THREE.Color()

变量。您可以将颜色设置为

// if you use a CDN or imported three.js like: import * as THREE from 'three'
const color = new THREE.Color('#00ff00');


// or import Color and use it directly
import { Color } from 'three';
const color = new Color('#00ff00');