Как использовать несколько материалов в кубе Three.js?

Я пытаюсь использовать Three.js для рендеринга куба с 6 различными изображениями на лицах.

Конструктор THREE.CubeGeometry выглядит следующим образом:

THREE.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides )

Из кода видно, что "материалы" должны быть либо материалом, либо массивом из 6 разных материалов, но материалы, переданные здесь, никогда не используются при рендеринге.

Вместо этого единственный материал, предоставленный конструктору Mesh, используется для всех 6 граней.

var face_materials = ... <load 6 textures here>...
var cube_g = new THREE.CubeGeometry(400,400,400,1,1,1, face_materials); // <= ignored?
var cube = new THREE.Mesh(cube_g, some_material); // <= this is used instead

Даже если я передаю null или undefined как "some_material", он, кажется, переопределяет face_materials и ничего не отображает.

Есть ли способ сделать эту работу с помощью CubeGeometry? Или мне нужно создать 6 граней отдельно и добавить их в сцену?

Ответ 1

Вам нужно использовать THREE.MeshFaceMaterial для сетки. Вот пример кода:

var materials = [];
for (var i=0; i<6; i++) {
  var img = new Image();
  img.src = i + '.png';
  var tex = new THREE.Texture(img);
  img.tex = tex;
  img.onload = function() {
    this.tex.needsUpdate = true;
  };
  var mat = new THREE.MeshBasicMaterial({color: 0xffffff, map: tex});
  materials.push(mat);
}
var cubeGeo = new THREE.CubeGeometry(400,400,400,1,1,1, materials);
var cube = new THREE.Mesh(cubeGeo, new THREE.MeshFaceMaterial());

Ответ 2

Для примера использования нескольких материалов в кубе для последней версии версии 3..sys 56 (март 2013 г.) проверьте исходный код примера на http://stemkoski.github.com/Three.js/Textures.html - самое большое последнее изменение заключается в том, что THREE.MeshFaceMaterial необходимо передать массив материалов, которые будут использоваться в CubeGeometry.

Ответ 3

MeshFaceMaterial теперь устарела, поэтому вместо использования вы должны передать массив MeshBasicMaterials.

Однако... если, как и я, вы все равно хотите визуализировать разные цвета на каждом лице, то есть другой способ, описанный в ответе WestLangley здесь. Основная идея заключается в том, что вы устанавливаете цвет на гранях объекта geometry, а не в виде массива материалов.

var geo = new THREE.BoxGeometry( 5, 2, 5 );

var mat = new THREE.MeshBasicMaterial( { color:0xff0ff0, vertexColors: THREE.FaceColors } );

var mesh = new THREE.Mesh( geo, mat );

mesh.geometry.faces[ 5 ].color.setHex( 0x00ffff );

Это действительно эффективный способ ведения дел.