Question

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

我开始学习如何制作一个立方体，导入一个纹理并设置一个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 control

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纹理更改代码中将“立方体”更改为“框”，我已经尝试命名框并调用它（在上面的代码中注释掉）但是那些不起作用。我在很多地方寻找过这个问题的答案，但我真的被卡住了。我觉得我可能错过了一些明显的东西？

任何帮助都会非常感激。

Answer 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);

在使用ImageUtils.loadTexture加载后，如何在加载到three.js中的Blender模型中更改纹理？

1 个答案: