Javascript 三个js：我想实现图中所示的目标，我该怎么做，我试过BoxGeomatry和planeGeomatry也不一样

正如您在图片中看到的，我希望立方体的每一侧都有多个图像，我已经尝试过BoxGeomatry，但没有得到确切的输出，所以有人能帮我吗

接下来，您可以学习如何在每张脸上获得不同的图像。下面您可以学习如何使用画布制作纹理

因此，通过结合这些技术，你可以在每一张脸上放置一个CanvaTexture，并在画布上绘制图像

“严格使用”；
/*全球三*/
const loader=new THREE.ImageLoader（）；
异步函数loadImage（url）{
返回新承诺（（解决、拒绝）=>{
load（url、解析、未定义、拒绝）；
});
}
函数main（）{
const canvas=document.querySelector（“#c”）；
const renderer=new THREE.WebGLRenderer（{canvas}）；
常数fov=75；
const aspect=2；//画布默认值
常数近=0.1；
常数far=5；
常量摄影机=新的三个透视摄影机（视野、方位、近距离、远距离）；
摄像机位置z=2；
const scene=new THREE.scene（）；
常数boxWidth=1；
const-boxHeight=1；
常数boxDepth=1；
const geometry=新的三个.BoxBufferGeometry（boxWidth、boxHeight、boxDepth）；
const cubes=[]；//只是一个数组，我们可以用它来旋转立方体
//加载6个图像
常量图像=[]；
[
'https://threejsfundamentals.org/threejs/resources/images/flower-1.jpg',
'https://threejsfundamentals.org/threejs/resources/images/flower-2.jpg',
'https://threejsfundamentals.org/threejs/resources/images/flower-3.jpg',
'https://threejsfundamentals.org/threejs/resources/images/flower-4.jpg',
'https://threejsfundamentals.org/threejs/resources/images/flower-5.jpg',
'https://threejsfundamentals.org/threejs/resources/images/flower-6.jpg',
].forEach（异步（url，ndx）=>{
const image=等待加载映像（url）；
图像[ndx]=图像；
});
//创建6个画布纹理
const canvasTextureInfos=[]；
for（设i=0；i<6；++i）{
const canvas=document.createElement（'canvas'）；
canvas.width=256；
canvas.height=256；
const ctx=canvas.getContext（'2d'）；
ctx.fillStyle='红色'；
ctx.fillRect（0，0，ctx.canvas.width，ctx.canvas.height）；
const纹理=新的三个。CanvasTexture（canvas）；
push（{ctx，texture}）；
}
//在立方体的每个面上放置不同的画布纹理
常数材料=[
新的三.MeshBasicMaterial（{map:canvasTextureInfos[0].texture}），
新的3.MeshBasicMaterial（{map:canvasTextureInfos[1].texture}），
新的3.MeshBasicMaterial（{map:canvasTextureInfos[2].texture}），
新的3.MeshBasicMaterial（{map:canvasTextureInfos[3].texture}），
新的3.MeshBasicMaterial（{map:canvasTextureInfos[4].texture}），
新的3.MeshBasicMaterial（{map:canvasTextureInfos[5].texture}），
];
常量立方体=新的三个网格（几何体、材质）；
场景.添加（立方体）；
push（cube）；//添加到要旋转的立方体列表中
函数resizeRenderToDisplaySize（渲染器）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
const needResize=canvas.width！==width | | canvas.height！==height；
如果（需要调整大小）{
设置大小（宽度、高度、假）；
}
返回需要调整大小；
}
函数渲染（时间）{
时间*=0.001；
if（ResizeRenderToDisplaySize（渲染器））{
const canvas=renderer.domeElement；
camera.aspect=canvas.clientWidth/canvas.clientHeight；
camera.updateProjectMatrix（）；
}
//在随机面上绘制随机图像
常数imgNdx=rand（6）；
常数img=图像[imgNdx]；
//检查此图像是否已加载
如果（img）{
常数面=兰特（6）；
const{ctx，texture}=canvasTextureInfos[face]；
常数x=兰特（3）*256/3；
常数y=兰特（3）*256/3；
常数宽度=256/3；
常数高度=256/3；
ctx.drawImage（图像、x、y、宽度、高度）；
texture.needsUpdate=true；
}
cubes.forEach（（cube，ndx）=>{
常数速度=.2+ndx*.1；
恒速=时间*速度；
立方体旋转x=旋转；
cube.rotation.y=rot；
});
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
}
函数rand（最大值）{
返回Math.random（）*max | 0；
}
main（）
正文{
保证金：0；
}
#c{
宽度：100vw；
高度：100vh；
显示：块；
}

如果您发布了当前看到的结果的图像，这将非常有用。使用CanvaTexture，将图像绘制到画布中。看见