三个 js - 单个对象上的多个 textures/images

Question

我想实现以下目标：从搅拌机导出 1 个对象 -> 将 2 个不同的纹理应用到 2 个不同的顶点组（手柄和袋子主体）

加载模型的函数：


      function loadModel() {
        var textureLoader = new THREE.TextureLoader();
        var map = textureLoader.load('./leather.jpg');
        var material = new THREE.MeshPhongMaterial({map: map});

        var loader = new THREE.OBJLoader();
        loader.load("bag.obj", function(object) {
          object.rotation.y = 90;
          scene.add(object);
          object.traverse( function ( node ) {
              if ( node.isMesh ) node.material = material;

            } );

          document.querySelector("h1").style.display = "none";
        });
      }

这将给出：

如何访问不同的顶点组并为其分配不同的纹理？例如，手柄可以是木头的。

Answer 1

在 Blender 的大纲视图中，分离顶点 groups/meshes 并相应地重命名它们 "bagHandle" 和 "bagBody"。

以下代码应该可以工作。

function loadModel() {
  var textureLoader = new THREE.TextureLoader();
  var bagBodyMap = textureLoader.load('./leather.jpg');
  var bagBodyMaterial = new THREE.MeshPhongMaterial({map: bagBodyMap});
  var bagHandleMap = textureLoader.load('./wood.jpg');
  var bagHandleMaterial = new THREE.MeshPhongMaterial({map: bagHandleMap});
  var loader = new THREE.OBJLoader();
  loader.load("bag.obj", function(object) {
      object.rotation.y = 90;
      scene.add(object);
      object.traverse( function ( node ) {
          if ( node.isMesh ){
              if ( node.name == "bagHandle" ){
                  node.material = bagHandleMaterial;
              } else if ( node.name == "bagBody" ){
                  node.material = bagBodyMaterial;
              }
          }
      });
      document.querySelector("h1").style.display = "none";
  });
};

三个 js - 单个对象上的多个 textures/images

Three js - Multiple textures/images on single object

blender

three.js