如何在加载到 Three.js 中的 Blender 模型中使用 ImageUtils.loadTexture 更改纹理？答案

【问题标题】：How can I change the texture in a Blender model loaded into three.js, after it's been loaded, with ImageUtils.loadTexture?如何在加载到 Three.js 中的 Blender 模型中使用 ImageUtils.loadTexture 更改纹理？
【发布时间】：2014-08-15 04:09:36
【问题描述】：

我正在做一个学生项目，其中涉及一个礼品盒，用户可以在其中更改其外观。

我开始学习如何制作立方体、导入纹理并设置 gui.dat 控件以允许用户更改纹理。

我现在正尝试用礼品盒的搅拌机模型替换立方体，但在更改纹理时遇到了麻烦。

编辑：完整代码在 github 上： https://github.com/GitKiwi/GiftBox/blob/master/Workspace/Proto%208c%20Changing%20textures%20on%20giftbox.html

工作立方体模型的编码是：

`// 添加带有纹理的立方体

    var cubeGeometry = new THREE.CubeGeometry(4,4,4);
    var cubeMaterial = new THREE.MeshLambertMaterial({ map:
             THREE.ImageUtils.loadTexture("birthday.jpg") });
    var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

    cube.position.set (0,0,0);
    cube.rotation.set (0,-1.2,0);
    cube.receiveShadow  = true;

    // add the cube to scene
    scene.add(cube); `

//gui纹理变化

`var controls = new function()
{ this.changeTexture = "birthday";

this.changeTexture = function (e){
var texture = THREE.ImageUtils.loadTexture
("../assets/textures/general/" + e + ".jpg");
cube.material.map = texture; }`

//gui控制

var gui = new dat.GUI();
gui.add(controls, "changeTexture", ['christmas', 'valentine', 'birthday']).onChange(controls.changeTexture);

我将礼品盒分成四个部分进行加载，我只是尝试获取第一部分，即盒子，以更改纹理。我加载它：

var box;
    var loaderOne = new THREE.JSONLoader();

    loaderOne.load('../assets/models/box.js', function (geometry)
    {
        var material = new THREE.MeshLambertMaterial({color: 0xffff00});
        box = new THREE.Mesh(geometry, material);
        box.position.set (5,0,5);
        box.scale.set (1,1,1);
        //box.name = "mybox";
        scene.add(box);
    });

我无法使用 gui 控件更改纹理。我尝试在 gui 纹理更改代码中将“立方体”更改为“框”，并尝试命名框并调用它（在上面的代码中注释掉），但这些都不起作用。我已经在很多地方搜索过这个问题的答案，但我真的被困住了。我觉得我可能遗漏了一些明显的东西？

任何帮助将不胜感激。

【问题讨论】：

你在设置material.map = texture;之后设置texture.needsUpdate = true了吗？
不幸的是，这不起作用。它适用于没有那条线的立方体，但是当我尝试更改盒子纹理时，无论有没有这条线，它都不起作用。
你需要展示你的整个代码，而不是 sn-ps。你能提供一个活生生的例子吗？
我会去清理我的文件夹和代码并将其发布在 github 上，然后在此处链接。我现在有点晚了，所以我明天早上会这样做，否则我会犯困的错误。感谢您花时间查看我的代码。
我已经编辑了原始问题并添加了指向 github 上完整代码的链接。如果将第 122 行的“box”一词更改为“cube”，则可以通过 gui 正确更改立方体纹理。目前无法更换盒子。

标签： three.js textures blender

【解决方案1】：

代码不起作用，因为我正在导入的模型没有纹理贴图。

我所做的是回到 Blender 并创建一个具有两个纹理的模型，每个纹理都可以应用于整个模型。然后导出的 JSON 文件包含模型几何图形和两个纹理（及其纹理贴图）。

在three.js中我加载了它：

// load in geometry and textures
    var loader = new THREE.JSONLoader();
    loader.load('../models/two textures on cube.js', function (geometry, material)
    {
        matOne = new THREE.MeshLambertMaterial(material[1]);
        matTwo = new THREE.MeshLambertMaterial(material[2]);
        box = new THREE.Mesh(geometry, matOne);

        //position, scale
        box.position.set (0,0,0);
        box.rotation.set (0,-1.2,0);
        box.scale.set (2,2,2);
        box.receiveShadow  = true;
        scene.add(box);


    }, '../models');

然后使用这段代码来切换纹理：

//gui control panel
    var controls = new function()
    {                   
        //changing the texture
        this.changeTexture = function (e)
        {
        switch (e) 
            {
        case "birthday":
        box.material = matOne;
        break;

        case "christmas":
        box.material = matTwo;
        break;
            }
        }
    }

使用 gui.dat 控件的代码：

//gui control panel
    var gui = new dat.GUI();
    gui.add(controls, "changeTexture", ['birthday', 'christmas']).onChange(controls.changeTexture);

【讨论】：