验证使用具有three.js立方体的多个纹理 [英] Verification of using multiple textures with three.js cubes

问题描述

有人可以验证一下three.js r53的以下代码吗?

Can someone please verify the following code for three.js r53?

取自这个问题:如何使用Three.js 多维数据集中的多种材质?

我尝试了此代码和一些变体，但没有看到可见的立方体.我的纹理图像按其应有的名称命名.

I tried this code and a few variations but I don't get visible cubes. My texture images are named as they should be.

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());

推荐答案

改为这样做:

var cubeGeo = new THREE.BoxGeometry( 400, 400, 400, 1, 1, 1 );
var cube = new THREE.Mesh( cubeGeo, materials );

materials 是一个包含 6 个 Three.js 材质的数组，每个面一个.

materials is an array of 6 three.js materials, one for each face.

查看迁移指南:https://github.com/mrdoob/三.js/wiki/Migration-Guide.

CubeGeometry 已重命名为 BoxGeometry 并且 THREE.MeshFaceMaterial 已被弃用.

CubeGeometry has been renamed to BoxGeometry and THREE.MeshFaceMaterial has been deprecated.

three.js r.92

three.js r.92

这篇关于验证使用具有three.js立方体的多个纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！