Three.js - CanvasRenderer не рендерит Mesh с несколькими материалами

Question

У меня проблема с CanvasRenderer, рендеринг Mesh с несколькими материалами, примененными к BoxBufferGeometry.Это делает Mesh без материалов.Это единственная проблема с CanvasRenderer, когда я использую ту же сетку с WebGLRenderer, все работает как положено.

Вот пример кода:

// three.js: multiple materials on a single mesh

var renderer, scene, camera, mesh;

init();
render();

function init() {

  // renderer
  renderer = new THREE.CanvasRenderer( { alpha: true } );
  renderer.setSize( window.innerWidth / 2, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera( 40, (window.innerWidth / 2) / window.innerHeight, 1, 1000 );
  camera.position.set( 15, 20, 30 );
  camera.lookAt(scene.position);
  scene.add( camera );


  // ambient
  scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );

  // light
  camera.add( new THREE.PointLight( 0xffffff, 1 ) );

  // geometry
  var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );

  // materials
  var material0 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  var material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  var material2 = new THREE.MeshBasicMaterial({ color: 0x0000ff });
  var material3 = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  var material4 = new THREE.MeshBasicMaterial({ color: 0x00ffff });
  var material5 = new THREE.MeshBasicMaterial({ color: 0xff00ff });

  var materials = [ material0, material1, material2, material3, material4, material5 ];

  // mesh
  mesh = new THREE.Mesh( geometry, materials );
  scene.add( mesh );

}

function render() {
  requestAnimationFrame(render);
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;
  renderer.render( scene, camera );
}

Я также сделал эту скрипку

Где вы можете точно увидеть, о чем я говорю.В скрипке есть Mesh (куб), который имеет все 6 групп (сторон) из другого материала (цвета), и та же самая Mesh визуализируется с помощью WebGLRenderer (слева) и CanvasRenderer (справа).

Может кто-то сбольше опыта поможет мне понять это.Я делаю что-то неправильно?Есть ли какое-то ограничение в CanvasRenderer, которое отключает его для рендеринга такой сетки, и если да, то как бы я достиг этого эффекта другим способом?Это ошибка, и я должен сообщить о ней как о проблеме в репозитории three.js?

Спасибо за вашу помощь!

Примечание: я новичок в Three.js, поэтому я прошу прощения, если сделал какую-то очевидную ошибку.CanvasRenderer очень важен для меня, так как я использую phantom.js для захвата некоторых скриншотов.

Three.js r93

Answer 1

CanvasRenderer не поддерживает BufferGeometry и мультиматериалы.

Обходной путь должен использовать Geometry вместо.

var geometry = new THREE.BoxGeometry( 10, 10, 10 );

three.jsR.93