三个J中图像未加载到planeGeometry上

Question

社区您好 我有 1 个关于图像未显示在 三个 JS 中的 PlaneGeometry 上的问题。每当我加载图像时，飞机都会变黑，并且此处不会进行图像反射，并且控制台中不会显示任何错误。

请给我正确的直接信息，我可以在planeGeometry上加载图像。

黑盒是 PlaneGeometry，白盒也是 PlaneGeometry

function init(){
console.log("inner Function");

const canvas = document.querySelector('#c');

// renderer
const renderer = new THREE.WebGLRenderer({
    canvas,
    alpha: true,
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
    
// Scene
const scene = new THREE.Scene();

// camera
const camera = new THREE.PerspectiveCamera(
    60, 
    window.innerWidth / window.innerHeight, 
    1, 
    1000
    );
    camera.position.set(0, 0, 4);

// Load image locally method-1
// const textureLoader = new THREE.TextureLoader();
// scene.background = textureLoader.load('../asset/Backgound.png');

// Load Image method-2
// const textureLoader = new THREE.TextureLoader();
// loader.load('./asset/Backgound.png' , function(texture)
//             {
//             scene.background = textureLoader;  
//             });

const planeGeometry = new THREE.PlaneGeometry(2, 2);
// const texture = new THREE.TextureLoader().load('./asset/Set.png');
// const planeMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});
// const planeMaterial = new THREE.MeshBasicMaterial({map: texture});
// const planeMaterial = new THREE.MeshBasicMaterial({color: "rgb(100%, 0%, 0%)"});

const planeMaterial = new THREE.MeshBasicMaterial({
    color: "#fafafa",
    side: THREE.DoubleSide,
    // visible: false,
});

// const planeMaterial = new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load("./asset/Set.png") })

const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane)

plane.position.x = 1.5
plane.position.y = -0.7
// plane.position.z = -4

// const textureImage = '../asset/ping_pong_ball.png';
const texture2 = new THREE.TextureLoader().load('./asset/ping_pong_ball.png');

const plane2Geometry = new THREE.PlaneGeometry(2, 2);
// // const plane2Material = new THREE.MeshBasicMaterial({color: 0xffffff});
// var img = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
//     map:THREE.ImageUtils.loadTexture('./asset/Set.png')
//     // map:THREE.TextureLoader('../asset/ping_pong_ball.png')
// });
// img.map.needsUpdate = true; //ADDED

const plane2Material = new THREE.MeshBasicMaterial({map: texture2});
const plane2 = new THREE.Mesh(plane2Geometry, plane2Material);
plane2.overdraw = true;
scene.add(plane2);

plane2.position.x = -1.5
plane2.position.y = -0.7

// const axesHelper = new THREE.AxesHelper(10);
// scene.add(axesHelper);



renderer.render(scene, camera)

window.addEventListener('resize', function(){
    camera.aspect = window.innerWidth /window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight)

})

} 初始化（）；

在此图像中，黑色平面实际上存在图像，但由于图像加载，平面变为黑色请帮忙。