Three.js：在圆柱体的每一侧添加不同的图像

我试图在three.js中为圆柱体的每个面添加不同的图像，基本上我希望顶部、底部和侧面是不同的图像

这是代码，我已经添加了一个图像，它包裹了整个圆柱体

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, 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.CylinderGeometry(0.9,1,0.5,32,1, false);
var material = new THREE.MeshPhongMaterial({color: 0xffffff, side:THREE.DoubleSide, map: THREE.ImageUtils.loadTexture('cake-texture-nice-golden-ginger-33420104.jpg')});
var cone = new THREE.Mesh(geometry, material);
scene.add(cone);

var width = window.innerWidth; var height = window.innerHeight; var screenW = window.innerWidth; var screenH = window.innerHeight; /*SCREEN*/ var spdx = 0, spdy = 0; mouseX = 0, mouseY = 0, mouseDown = false; /*MOUSE*/ document.body.addEventListener("mousedown", function(event) { mouseDown = true }, false); document.body.addEventListener("mouseup", function(event) { mouseDown = false }, false); function animate() { spdy = (screenH / 2 - mouseY) / 40; spdx = (screenW / 2 - mouseX) / 40; if (mouseDown){ cone.rotation.x = spdy; cone.rotation.y = spdx; } requestAnimationFrame( animate ); render(); } // create a point light var pointLight = new THREE.PointLight( 0xFFFF8F ); // set its position pointLight.position.x = 10; pointLight.position.y = 50; pointLight.position.z = 130; // add to the scene scene.add(pointLight); camera.position.z = 5; var render = function () { requestAnimationFrame(render); //cone.rotation.x += 0.01; //cone.rotation.y += 0.001; //cone.rotation.z -= 0.02; window.addEventListener('mousemove', function (e) { var mouseX = ( e.clientX - width / 2 ); var mouseY = ( e.clientY - height / 2 ); cone.rotation.x = mouseY * 0.005; cone.rotation.y = mouseX * 0.005; cone.rotation.y += mouseY; //console.log(mouseY); }, false); renderer.render(scene, camera); }; render();

这是用于圆柱体的笔：

---

更新日期：9月25日

var materialTop = new THREE.MeshPhongMaterial({color: 0xffffff, side:THREE.DoubleSide, map: THREE.ImageUtils.loadTexture('chocolate_brown_painted_textured_wall_tileable.jpg')});
var materialSide = new THREE.MeshPhongMaterial({color: 0xffffff, side:THREE.DoubleSide, map: THREE.ImageUtils.loadTexture('cake-texture-nice-golden-ginger-33420104.jpg')});
var materialBottom = new THREE.MeshPhongMaterial({color: 0xffffff, side:THREE.DoubleSide, map: THREE.ImageUtils.loadTexture('cake-texture-nice-golden-ginger-33420104.jpg')});
var materialsArray = [];
materialsArray.push(materialTop); //materialindex = 0
materialsArray.push(materialSide); // materialindex = 1
materialsArray.push(materialBottom); // materialindex = 2
var material = new THREE.MeshFaceMaterial(materialsArray);
var geometry = new THREE.CylinderGeometry(0.9,1,0.5,3,1, false);
var aFaces = geometry.faces.length;
console.log(aFaces);
for(var i=0;i<aFaces;i++) {
geometry.faces[i].materialindex;
}
var cone = new THREE.Mesh(geometry, material);

scene.add(cone);

var materialTop=new THREE.MeshPhongMaterial（{color:0xffffff，side:THREE.DoubleSide，map:THREE.ImageUtils.loadTexture（'chocolate_brown_painted_textured_wall_tilable.jpg'））；
var materialSide=new THREE.MeshPhongMaterial（{color:0xffffff，side:THREE.DoubleSide，map:THREE.ImageUtils.loadTexture（'cake-texture-nice-golden-ginger-33420104.jpg'）；
var materialBottom=new THREE.MeshPhongMaterial（{color:0xffffff，side:THREE.DoubleSide，map:THREE.ImageUtils.loadTexture（'cake-texture-nice-golden-ginger-33420104.jpg'）；
var materialsArray=[]；
materialsArray.push（materialTop）//唯物指数=0
materialsaray.push（materialSide）；//材料指数=1
materialsArray.push（物料底部）；//材料指数=2
var material=新的三个网格面材质（materialsArray）；
var几何=新的三圆柱几何（0.9,1,0.5,3,1，假）；
var aFaces=geometry.faces.length；
控制台日志（aFaces）；
对于（var i=0；i您应该使用一些materialindex在网格几何体中创建面。因此您将有3个曲面。然后使用MeshFaceMaterial（每个曲面的材质数组）。
创建MeshFaceMaterial:

var materialTop = new THREE.MeshPhongMaterial(...);
var materialSide = new THREE.MeshPhongMaterial(...);
var materialBottom = new THREE.MeshPhongMaterial(...);
var materialsArray = [];
materialsArray.push(materialTop); //materialindex = 0
materialsArray.push(materialSide); // materialindex = 1
materialsArray.push(materialBottom); // materialindex = 2
var material = new THREE.MeshFaceMaterial(materialsArray);

更新几何图形：

var geometry = new THREE.CylinderGeometry(0.9,1,0.5,32,1, false);
faces you can get from geometry.faces
Loop faces and change materialindex: geometry.faces[faceIndex].materialindex
Print geometry.faces to console and check what it has.

var aFaces = geometry.faces.length;
for(var i=0;i<aFaces;i++) {
  if(i < 64){
    geometry.faces[i].materialIndex = 0;
  }else if(i > 63 && i < 96){
    geometry.faces[i].materialIndex = 1;
  }else{
    geometry.faces[i].materialIndex = 2;
  }
}

检查。您需要更改几何体中每组面（顶部、侧面、底部）的materialindex。faces[]中的materialindex。materialindex对于三个js来说都是全新的，所以我不确定如何使用MeshFaces材质和几何体。faces[].materialindex，如果你有一个参考资料或一把小提琴，你能把它寄给我吗。正如我说的，我对三个js很陌生，所以我不知道如何使用MeshFaceMaterial和geometry.faces[].materialindex，如果您有参考资料或小提琴，请发送给我。我已经更新了问题中的代码，我不理解“materialindex:geometry.faces[faceIndex].materialindex”这句话。您能在这里帮我吗？更新了代码并添加了与更新代码的链接
var cone = new THREE.Mesh(geometry, material);