为什么不将材料数组传递给 THREE.Mesh 构造函数在这里起作用？

Question

我是 three.js 的新手，我不太明白为什么数组在这里不起作用。文档和一些指南建议将数组传递给构造函数。

来自threejs.org：

Constructor

Mesh( geometry : BufferGeometry, material : Material )

geometry — (optional) an instance of BufferGeometry. Default is a new BufferGeometry.
material — (optional) a single or an array of Material. Default is a new MeshBasicMaterial

我可以引用数组的索引并查看纹理是否正确加载：

// this works:
var cube = new THREE.Mesh( geometry, materials[4] );

// passing in the array doesn't, why?
var cube = new THREE.Mesh( geometry, materials );

我已经 Codepen here. 使用下面发布的相同复制：


function make_texture(name)
{
  const ctx = document.createElement('canvas').getContext('2d');
  document.body.appendChild(ctx.canvas);
  ctx.canvas.width = 256; ctx.canvas.height = 256;
  ctx.font = '20pt Arial';
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillStyle = 'white';
  ctx.fillRect(5, 5, ctx.canvas.width - 10, ctx.canvas.height - 10);
  ctx.fillStyle = 'black';
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(name, ctx.canvas.width / 2, ctx.canvas.height / 2);
  const texture = new THREE.CanvasTexture(ctx.canvas);
  return texture
};

var materials = [];
for ( var i = 1; i < 7; i ++ ) {
    materials.push( new THREE.MeshBasicMaterial( { map: make_texture(i) } ) );
};

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

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

// this works:
// var cube = new THREE.Mesh( geometry, materials[4] );

// passing in the array doesn't, why?
var cube = new THREE.Mesh( geometry, materials );


scene.add( cube );

camera.position.z = 3;

var pointLight = new THREE.PointLight(0xffffff, 1.5);
pointLight.position.set(0, 300, 200);

scene.add(pointLight);

var animate = function () {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render( scene, camera );
};

animate();

Answer 1

经过进一步调查后发现这是一个版本控制问题 - 我在 CodePen 上使用的模板中来自 CDN 的 three.js 的修订版是 r84 并产生了上述行为。

使用链接 here 将 codepen 中的设置更新为 r128 解决了这个问题并按预期工作。

修复了 CodePen here。

为什么不将材料数组传递给 THREE.Mesh 构造函数在这里起作用？

Why doesn't passing in an array of Materials to the THREE.Mesh constructor work here?

javascript

canvas

three.js

Constructor

Mesh( geometry : BufferGeometry, material : Material )