Three.js项目黑屏无报错：适配新版后无法显示动画云

背景 #

有一个2011年开发的Three.js动画云项目，原代码依赖的旧版Three.js方法大多已被弃用。我对项目做了适配调整：

• 将原HTML中的引入语句替换为模块方式：<script type="module" src="/main.js"></script>
• 在main.js中更新了所有已弃用API，比如用BufferGeometry替代Geometry、TextureLoader替代ImageUtils.loadTexture等

修改后的main.js代码 #

// edit
import * as THREE from "three";

var container;
var camera, scene, renderer;
var mesh, geometry, material;

var mouseX = 0,
  mouseY = 0;
var start_time = Date.now();

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();

function init() {
  container = document.getElementById("scene1");
  document.body.appendChild(container);

  // Bg gradient

  var canvas = document.createElement("canvas");
  canvas.width = 32;
  canvas.height = window.innerHeight;

  var context = canvas.getContext("2d");

  var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
  gradient.addColorStop(0, "#1e4877");
  gradient.addColorStop(0.5, "#4584b4");

  context.fillStyle = gradient;
  context.fillRect(0, 0, canvas.width, canvas.height);

  container.style.background = "url(" + canvas.toDataURL("image/png") + ")";
  container.style.backgroundSize = "32px 100%";

  //

  camera = new THREE.PerspectiveCamera(
    30,
    window.innerWidth / window.innerHeight,
    1,
    3000
  );
  camera.position.z = 6000;

  scene = new THREE.Scene();

  // edit
  // geometry = new THREE.Geometry();
  geometry = new THREE.BufferGeometry();

  // edit
  // var texture = THREE.ImageUtils.loadTexture(
  // ...
  // )
  var texture = new THREE.TextureLoader().load(
    "assets/cloud.png",
    animate,
    undefined,
    function (err) {
      console.error("An error happened.");
    }
  );
  texture.magFilter = THREE.LinearMipMapLinearFilter;
  texture.minFilter = THREE.LinearMipMapLinearFilter;

  var fog = new THREE.Fog(0x4584b4, -100, 3000);

  material = new THREE.ShaderMaterial({
    uniforms: {
      map: { type: "t", value: texture },
      fogColor: { type: "c", value: fog.color },
      fogNear: { type: "f", value: fog.near },
      fogFar: { type: "f", value: fog.far },
    },
    vertexShader: document.getElementById("vs").textContent,
    fragmentShader: document.getElementById("fs").textContent,
    depthWrite: false,
    depthTest: false,
    transparent: true,
  });

  var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));

  for (var i = 0; i < 8000; i++) {
    plane.position.x = Math.random() * 1000 - 500;
    plane.position.y = -Math.random() * Math.random() * 200 - 15;
    plane.position.z = i;
    plane.rotation.z = Math.random() * Math.PI;
    plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

    // edit
    // THREE.GeometryUtils.merge(geometry, plane);
    geometry.copy(plane.geometry);
  }

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  mesh = new THREE.Mesh(geometry, material);
  mesh.position.z = -8000;
  scene.add(mesh);
  renderer = new THREE.WebGLRenderer({ antialias: false });
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  document.addEventListener("mousemove", onDocumentMouseMove, false);
  window.addEventListener("resize", onWindowResize, false);
}

function onDocumentMouseMove(event) {
  mouseX = (event.clientX - windowHalfX) * 0.25;
  mouseY = (event.clientY - windowHalfY) * 0.15;
}

function onWindowResize(event) {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);

  var position = ((Date.now() - start_time) * 0.03) % 8000;

  camera.position.x += (mouseX - camera.position.x) * 0.01;
  camera.position.y += (-mouseY - camera.position.y) * 0.01;
  camera.position.z = -position + 8000;

  renderer.render(scene, camera);
}

当前问题 #

启动本地服务器后页面仅显示黑屏，VSCode编辑器和浏览器开发者控制台均无任何报错信息，无法排查问题原因。

内容的提问来源于stack exchange，提问作者zion