Javascript 立方体的每个面上有三个不同的文本

我正在使用Threejs制作一个立方体的动画，每个立方体面上都有不同的文本。我使用DynamicTexture在立方体面上放置文本，但它在立方体的每一侧放置相同的文本。我不知道如何在每一面放置不同的文本。有没有办法通过用户输入在运行时创建和放置文本？谢谢

Main.js

var scene = new THREE.Scene();
scene.background = new THREE.Color('white');
var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.set(4, 4, 4);
camera.lookAt(0, 0, 0);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('display').appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera);
var dynamictexture = new THREEx.DynamicTexture(512, 512);
dynamictexture.context.font = "bolder 90px verdana";
dynamictexture.texture.needsUpdate = true;
dynamictexture.clear('#d35400').drawText('Text', undefined, 256, 'green');
var geometry = new THREE.BoxGeometry(2, 2, 2);
var material = new THREE.MeshBasicMaterial({color: 0xffffff, map: dynamictexture.texture, opacity:1, 
transparent: true});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function animate() {
requestAnimationFrame(animate);
controls.update();
dynamictexture.texture
renderer.render(scene, camera);
};
animate();

---

您可以使用

THREE.meshfacemarterial（materials）

来完成此操作。您只需传递一个包含材质的数组，并为每个面指定贴图

var face_textures = [];
function createFaceTextures() {
  var i;
  for(i = 0; i < 6; i++) {
    var dynamictexture = new THREEx.DynamicTexture(512, 512);
    dynamictexture.context.font = "bolder 90px verdana";
    dynamictexture.texture.needsUpdate = true;
    dynamictexture.clear('#d35400').drawText(i.toString(), undefined, 256, 'green');
    face_textures.push(dynamictexture);
  }
}
createFaceTextures();

var scene = new THREE.Scene();
scene.background = new THREE.Color('white');
var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.set(4, 4, 4);
camera.lookAt(0, 0, 0);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('display').appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera);
var dynamictexture = new THREEx.DynamicTexture(512, 512);
dynamictexture.context.font = "bolder 90px verdana";
dynamictexture.texture.needsUpdate = true;
dynamictexture.clear('#d35400').drawText('Text', undefined, 256, 'green');
var geometry = new THREE.BoxGeometry(2, 2, 2,);
var material = new THREE.MeshBasicMaterial({color: 0xffffff, map: dynamictexture.texture, opacity:1, transparent: true});

var materials = [
  new THREE.MeshBasicMaterial({map: face_textures[0].texture}),
  new THREE.MeshBasicMaterial({map: face_textures[1].texture}),
  new THREE.MeshBasicMaterial({map: face_textures[2].texture}),
  new THREE.MeshBasicMaterial({map: face_textures[3].texture}),
  new THREE.MeshBasicMaterial({map: face_textures[4].texture}),
  new THREE.MeshBasicMaterial({map: face_textures[5].texture})
];

var cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    dynamictexture.texture
    renderer.render(scene, camera);
}
animate();

var face_textures=[]；
函数createFaceTextures（）{
var i；
对于（i=0；i<6；i++）{
var dynamictexture=newthreex.dynamictexture（512）；
dynamictexture.context.font=“bolder 90px verdana”；
dynamictexture.texture.needsUpdate=true；
dynamictexture.clear（'#d35400'）.drawText（i.toString（），未定义，256，'green'）；
面纹理。推送（动态纹理）；
}
}
createFaceTextures（）；
var scene=new THREE.scene（）；
scene.background=新的三种颜色（“白色”）；
var摄像机=新的三透视摄像机（50，window.innerWidth/window.innerHeight，11000）；
摄像机。位置。设置（4，4，4）；
摄像机。注视（0，0，0）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.getElementById（'display'）.appendChild（renderer.doElement）；
var控制装置=新的三个轨道控制装置（摄像机）；
var dynamictexture=newthreex.dynamictexture（512）；
dynamictexture.context.font=“bolder 90px verdana”；
dynamictexture.texture.needsUpdate=true；
dynamictexture.clear（'#d35400'）。drawText（'Text'，未定义，256，'green'）；
var geometry=新的3.BoxGeometry（2,2,2，）；
var material=new THREE.MeshBasicMaterial（{color:0xffffff，map:dynamictexture.texture，不透明度：1，transparent:true}）；
var材料=[
新的3.MeshBasicMaterial（{map:face_textures[0].texture}），
新的3.MeshBasicMaterial（{map:face_textures[1].texture}），
新的3.MeshBasicMaterial（{map:face_textures[2].texture}），
新的3.MeshBasicMaterial（{map:face_textures[3].texture}），
新的3.MeshBasicMaterial（{map:face_textures[4].texture}），
新的3.MeshBasicMaterial（{map:face_textures[5].texture}）
];
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
函数animate（）{
请求动画帧（动画）；
控件更新（）；
动态纹理
渲染器。渲染（场景、摄影机）；
}
制作动画（）；

你能用提琴或密码笔重新生成问题吗？[link]（）这里是密码笔链接给定的链接工作不正常..链接工作对我来说没问题。我是codepen的新手，请告诉我代码是否可编辑。谢谢。谢谢。它可以工作，但它显示一个警告“MeshFaceMaterial”已被删除。有其他类似的材料吗？编辑后的帖子现在应该没有警告@manivannabalaji