为什么我不能在 three.js 中查看 .jpg 纹理？

Question

我正在学习 three.js，但无法映射尺寸正确（2 的幂）的 jpg 图像 我正在将它加载到 lambert 材质中，但我在使用我尝试过的每种材质查看导入纹理时遇到了问题。 仔细检查了文件名，它似乎是正确的。 我正在使用 Five Server 在本地服务和预览项目

我试图改变材料的类型，它仍然没有显示图像。 我期待图像映射到我正在加载它的对象，但它不会。 也尝试询问 GPT，但其建议均未显示导入的纹理。目前在 chromium 的 manjaro linux 上运行该项目。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//const loader = new THREE.TextureLoader();

//const gradientMap = loader.load( 'fiveTone.jpg');

gsap.to(".txt", {duration: 2, x:425});

const geometry = new THREE.BoxGeometry( 3, 2, 2);
const geometry2 = new THREE.SphereGeometry( 1, 32, 32);
const floorgeo = new THREE.PlaneGeometry( 20, 20);

//const material = new THREE.MeshBasicMaterial( { color: 0x6AA84F } );

const material2 = new THREE.MeshLambertMaterial({
  color: 0x3e32a8,
  emissive: 0x3e32a8,
  side: THREE.DoubleSide,
  map: new THREE.TextureLoader().load('trianglefabric.jpg')

});

const material = new THREE.MeshLambertMaterial({
    color: 0xafc9b6,
    emissive: 0xafc9b6,
    map: new THREE.TextureLoader().load('trianglefabric.jpg'),
  });

const wireframe = new THREE.MeshBasicMaterial({
    color: 0xff0000, 
    transparent: true,
    opacity: 0.5,
    wireframe: true,
    wireframeLinewidth: 3,
  });

const floor = new THREE.Mesh(floorgeo, material2);
const cube = new THREE.Mesh( geometry, material );
const sphere = new THREE.Mesh( geometry2, wireframe );
scene.add( floor );
scene.add( cube );
scene.add( sphere );

sphere.position.set( 2, 0, 0 );
floor.position.set( 0, -2, 0 );
floor.rotation.x = -Math.PI / 2;

camera.position.z = 5;

function animate() {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    sphere.rotation.y += -0.01;

    renderer.render( scene, camera );
}

animate();