【问题标题】:Three.js - Displaying images on a JSON objectThree.js - 在 JSON 对象上显示图像
【发布时间】:2015-10-17 21:00:38
【问题描述】:

我正在使用 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);
    });

【问题讨论】:

  • 顺便说一句,你能让你的问题更清楚吗?你加载物体或材料吗?不清楚您的图像来自哪里?也许,你已经有了立方体,并且正在加载材料,因为用“three.js”制作立方体并不难?
  • 我正在加载 json 文件,但代码没有显示我尝试在对象上显示图像。我尝试了几种猜测来尝试使图像显示,但它不起作用。如果我向您展示了我的原始代码,恐怕它看起来会不清楚且令人费解。我的图像来自资源/图像文件夹中的一个文件夹,即包含“json”文件夹的同一个资源文件夹。我认为我将其作为材料而不是图像加载;加载物体或材料有什么区别?加载图像时有首选方式吗?

标签: javascript json three.js blender


【解决方案1】:

1) 如果您正在加载材质,并且已经有了几何图形,那么您是否尝试过“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);
        });

【讨论】:

  • 我已经尝试过这种方法,但我过去编码错误。我现在正在创建我的材质数组来尝试一下。你将如何声明和定义数组?我知道如何制作数组,但我问的是通过three.js库加载图像。
  • 用第二个选项检查我的答案!并检查您的图片是否为 .png?
  • 它们肯定是 PNG 文件。
  • 如果我已经有了几何图形,你的意思是什么?你的意思是3D形状? Six.json 是定义形状 - 它是定义坐标的一系列数据。
  • 我已经加载了形状,谢谢 Darius。不过,我仍在努力实际展示不同的图像。我将我的代码发布在另一篇文章中,因为它需要不同方面的帮助 - 涉及的错误已解决,但仍不显示图像。帖子在这里:stackoverflow.com/questions/31684967/…
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-08-02
  • 2014-10-02
  • 2013-05-31
  • 1970-01-01
  • 1970-01-01
  • 2015-11-15
  • 1970-01-01
相关资源
最近更新 更多