Three.js - 在JSON对象上显示图像

时间:2015-07-27 15:26:55

标签: javascript json three.js blender

我正在使用该库的71版。我试图在3D对象的每个面上显示图像(通过Blender制作)。是通过不同的图像还是重复一个图像并不重要。在将实例化为JSONLoader之后,该对象通过加载函数加载。以下是加载json文件的示例。在这种情况下,形状是立方体,具有六个边。有没有办法修改以下代码来实现这一目标?

    var loaderSix = new THREE.JSONLoader();
    loaderSix.load("./resources/json/six.json", function (model) {
        var materialSix = new THREE.MeshNormalMaterial();

        six = new THREE.Mesh(model, materialSix);
        six.translateY(1);
        six.scale = new THREE.Vector3(3, 3, 3);
        meshSix = THREE.SceneUtils.createMultiMaterialObject(six, materialSix);
    });

1 个答案:

答案 0 :(得分:1)

1)如果你正在加载材料,并且已经有了几何图形,那么你是否尝试过#34; MeshFaceMaterial" (docs)?

var loaderSix = new THREE.JSONLoader();
    loaderSix.load("./resources/json/six.json", function (model) {
        var materialSix = new THREE.MeshFaceMaterial("your materials array: model");

        six = new THREE.Mesh("your cube geometry", materialSix);
        six.translateY(1);
        six.scale = new THREE.Vector3(3, 3, 3);
    });

2)如果你正在加载对象,那么添加不同的图像是" MeshFaceMaterial"也是一个选项,类似的例子here。我修改了该代码以适应这种情况:

    var image;        
    var materials = [];
    for (var i=0; i<6; i++) {
     image = "./resources/images/"+fileName+".png"
     materials.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture(image)}));
    }
    var loaderSix = new THREE.JSONLoader();
        loaderSix.load("./resources/json/six.json", function (model) {
            var materialSix = new THREE.MeshFaceMaterial(materials);

            six = new THREE.Mesh(model, materialSix);
            six.translateY(1);
            six.scale = new THREE.Vector3(3, 3, 3);
        });