Question

我刚刚向WebGL和Threejs介绍过自己，作为一个开始，我正在尝试创建一个3D骰子。我已经达到了创建立方体的程度但我无法弄清楚如何将数字放在立方体的面上，我所能找到的就是如何改变颜色。我已经查看了包中给出的示例，但我似乎也找不到任何带有文本的示例。这是我的代码

container = document.body;

renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0xf0f0f0 );
renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;

scene = new THREE.Scene();

geometry = new THREE.CubeGeometry(200,200,200);

cube = new THREE.Mesh(geometry);

scene.add( cube )
cube.rotation.x = 0.01;
renderer.render( scene, camera );

我已记录geometry，其中包含属性faces，但它只有颜色：/

Answer 1

看看

How to use multiple materials in a Three.js cube?
Verification of using multiple textures with three.js cubes
Three.js cube with different texture on each face。

请注意您使用的是哪个版本的three.js.

Answer 2

通常，THREE.Mesh构造函数如下所示：

           Mesh( geometry, material )

http://threejs.org/docs/#Reference/Objects/Mesh

使用材质作为构造函数的第二个参数，以便能够为骰子使用纹理。我认为会出现问题，因为CubeGeometry的边不是唯一的UV贴图，因此如果在这样的立方体上使用纹理，每个面都会显示整个纹理。您将不得不重新计算每个面的UV映射并设置适当的纹理，或者我认为更简单的方法是使用DCC应用程序创建具有唯一映射面的立方体，然后使用自定义纹理作为骰子。我想开始吧，试试Blender，因为它是我认为最好的开源DCC应用程序。另一种解决方案是在互联网上找到具有纹理的模型，并使用它来显示骰子。

Threejs Dice，如何将数字放在脸上

2 个答案: