时间戳

首页 > 解决方案 > 通过 dat.gui 下拉菜单更新 three.js 纹理

three.js - 通过 dat.gui 下拉菜单更新 three.js 纹理

问题描述

我已经加载了不同的纹理textureLoader，我正在尝试使用 dat.gui 控件更新它们。

为什么下面的代码不起作用？

gui.add(mesh.position, "y", -1, 1, 0.1);
gui.add(mesh.material, "map", { alpha: alphaTexture, color: colorTexture, normal: normalTexture })
    .onChange(() => {
        mesh.material.needsUpdate = true;
        console.log("updated");
    });

它给出了这个错误：

"Uncaught TypeError: m is undefined" [error][1]

标签： three.jsdat.gui

解决方案

我发现您的主题正在寻找纹理选择器。它可能离您的起点有点远，但可以帮助其他人。我终于用 dat.gui 制作了一个带有下拉选择键的简单纹理选择器。目标是能够通过一系列加载的纹理动态更改我的 matcap 纹理。

const gui = new dat.GUI()
const textureLoader = new THREE.TextureLoader()
const myMatCap = [
    textureLoader.load('./textures/matcaps/1.png'),
    textureLoader.load('./textures/matcaps/2.png'),
    textureLoader.load('./textures/matcaps/3.png')
]

const parameters = {
    color: 0xff0000,
    matCapTexture: 0
}
const updateAllMaterials = () => {
    scene.traverse( (child)=>{
        if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshMatcapMaterial) {
            child.material.matcap = myMatCap[ parameters.matCapTexture]
            child.material.needsUpdate = true
        }
    })
}
gui.add(parameters, 'matCapTexture', {
    terracotta: 0,
    grey: 1,
    chrome: 2,
}).onFinishChange(()=>{
    updateAllMaterials()
})

let mesh = new THREE.Mesh( 
    geometry, 
    new THREE.MeshMatcapMaterial({ 
        side: THREE.DoubleSide, 
        matcap: myMatCap[ parameters.matCapTexture ]
    })
);
scene.add(mesh)

推荐阅读