ThreejsでTHREE.BoxGeometryの1面にだけTextureを貼るには

下記なのですが、canvasをtextureに使用しています。BoxGeometryの6面すべてにtextureが表示されていますが、これを前面(1面)のみにしたいのですがどうすればいいでしょうか？

threejs
1<!DOCTYPE html>
2<head>
3<meta charset="utf-8">
4<script src="https://d3js.org/d3.v5.min.js"></script>
5<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
6</head>
7<body>
8<script>
9var camera, scene, renderer, geometry, texture, mesh;
10
11function makeCanvas(){
12    const width = 200;
13    const height = 200;
14    const canvas = d3.create("canvas")
15          .attr("width", width)
16          .attr("height", height)
17          .attr("style","background-color:#ffd700")
18    const context = canvas.node().getContext("2d");
19    context.fillStyle = "#000000";
20    context.fillRect(0, 0, width, height);
21    context.fillStyle = "#ffd700";
22    context.fillRect(1, 1, width-2, height-2);
23    context.textAlign = "center";
24    context.textBaseline = "middle";
25    context.fillStyle = "#C19F4F";
26    context.font = "bold 20px 'ＭＳ ゴシック'";
27    context.fillText("999.9", width/2, height/2-40, width);
28    context.font = "bold 50px 'ＭＳ ゴシック'";
29    context.fillText("GOLD", width/2, height/2, width);
30
31    return canvas.node();
32}
33    
34function init() {
35    var width = window.innerWidth, height = window.innerHeight;
36
37    renderer = new THREE.WebGLRenderer();
38    renderer.setSize(width, height);
39    document.body.appendChild(renderer.domElement);
40    
41    scene = new THREE.Scene();
42  
43    camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
44    camera.position.z = 400;
45    camera.position.y = 200;
46    camera.position.x = 10;
47    camera.lookAt(scene.position);
48    
49    scene.add(camera);
50
51    texture = new THREE.Texture(makeCanvas());
52    texture.minFilter = THREE.LinearFilter;
53    var material = new THREE.MeshBasicMaterial({ map: texture});
54    geometry = new THREE.BoxGeometry( 200, 200, 200 );
55    mesh = new THREE.Mesh( geometry, material );
56    scene.add( mesh );
57
58    animate();
59}
60
61function animate() {
62    requestAnimationFrame(animate); 
63    texture.needsUpdate = true;
64    mesh.rotation.y += 0.01;
65    renderer.render(scene, camera);
66}
67
68window.onload = init;
69
70</script>
71</body>
72</html>

行動規範の内容に同意します

回答1件

自己解決

文字入りと文字なしの2つのcanvasを使用した
var matArray = [];
matArray.push(new THREE.MeshBasicMaterial({ map: texture}));
matArray.push(new THREE.MeshBasicMaterial({ map: texture2}));
matArray.push(new THREE.MeshBasicMaterial({ map: texture2}));
matArray.push(new THREE.MeshBasicMaterial({ map: texture2}));
matArray.push(new THREE.MeshBasicMaterial({ map: texture2}));
matArray.push(new THREE.MeshBasicMaterial({ map: texture2}));
mesh = new THREE.Mesh( geometry, matArray );