three.jsのテクスチャがレンタリングされない

three.jsの入門サイトを見ながらテクスチャを貼ってみたのですが、描画されません。
エラーも出てなかったので何かわかることがある方がいらっしゃれば教えていただきたいです

js
1// ページの読み込みを待つ
2window.addEventListener("DOMContentLoaded", init);
3
4function init() {
5  // サイズを指定
6  const width = window.outerWidth;
7  const height = window.innerHeight;
8
9  // レンダラーを作成
10  const renderer = new THREE.WebGLRenderer({
11    canvas: document.querySelector("#canvas"),
12  });
13  renderer.setPixelRatio(window.devicePixelRatio);
14  renderer.setSize(width, height);
15
16  // シーンを作成
17  const scene = new THREE.Scene();
18
19  // カメラを作成
20  const camera = new THREE.PerspectiveCamera(45, width / height);
21  camera.position.set(0, 0, +1000);//x,y,z
22
23  // 箱を作成
24  const loader = new THREE.TextureLoader();
25  const material = [
26    new THREE.MeshBasicMaterial({map:loader.load("../image/Pg-v.png")}),
27    new THREE.MeshBasicMaterial({map:loader.load("../image/Pg-v.png")}),
28    new THREE.MeshBasicMaterial({map:loader.load("../image/Pg-v.png")}),
29    new THREE.MeshBasicMaterial({map:loader.load("../image/Pg-v.png")}),
30    new THREE.MeshBasicMaterial({map:loader.load("../image/Pg-v.png")}),
31    new THREE.MeshBasicMaterial({map:loader.load("../image/Pg-v.png")})
32  ]
33  const geometry = new THREE.BoxGeometry(100, 100, 100);
34  const box = new THREE.Mesh(geometry, material);
35  scene.add(box);
36  box.rotation.x += 10;
37  renderer.render(scene, camera); // レンダリング
38}