javascript - THREE.js 不渲染图像

Question

我刚刚开始学习 js 和 THREE.js 并且已经掌握了一些基础知识。我正在学习教程，但似乎无法将图像加载到我的手机或计算机上。

我在 Codepen 上执行此操作，但也通过 VS Code 尝试过，其中 styles.css 和 image.png 文件位于同一文件夹中。当我在浏览器中打开它时，它显示黑色背景并且没有图像，就像在 CodePen 中一样。我已经在这几个小时了，只是不知道有什么问题。

这是教程https://www.youtube.com/playlist?list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM

TIME = 3:58 是图像应该加载的时间。

到目前为止，这是我的代码

let scene, lightDir, lightAmb, camera, width = window.innerWidth, height = window.innerHeight, renderer, portalGeo, portalMat;

function initScene() {
  scene = new THREE.Scene();
  
  lightDir = new THREE.DirectionalLight(0xffffff,0.5);
  lightDir.position.set(0,0,30);
  scene.add(lightDir);
  
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 1000;
  scene.add(camera);
  
  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0x000000, 1);
  renderer.setSize(window.innerWidth , window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  particleSetup();
}
function particleSetup() {
  let loader = new THREE.TextureLoader();
  
  loader.load("https://lh3.googleusercontent.com/17wSPGemFtp1HD_qx8MRYD1QAczIEZjXYiTNXuxNXC6lGM4kbZSPdez2kuHHZB4wpIYMdWFBb2F-L6MjdwyM1n3s13OM4BKIxW2K35y6rFC65DRCqckm7mvWZ708snikmYLTHny3rQ=s256-p-k", function (texture){
    portalGeo = new THREE.PlaneBufferGeometry(350,350);
    portalMat = new THREE.MeshStandardMaterial({
      map:texture,
      transparent:true
    });
    
    let particle = new THREE.Mesh(portalGeo,portalMat);
    particle.position.set(2,2,2);
    scene.add(particle);
    
    renderer.render(scene,camera);
  });
  
}
initScene();

这是钢笔 https://codepen.io/jfirestorm44/pen/GRqRReL

提前致谢。

标签： javascriptthree.js