这是我第一次使用 Three.js。我正在遵循教程这里。尽管我完全按照教程进行操作，但画布上没有出现球体。这是我的 JavaScript 代码：
import * as THREE from "three";
// Scene
const scene = new THREE.Scene();
// Create our sphere
const geometry = new THREE.SphereGeometry(3, 64, 64); // radius, segment, segment
const material = new THREE.MeshStandardMaterial({
color: "#00ff83",
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Light
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 10, 10);
scene.add(light);
// Adding the camera
const camera = new THREE.PerspectiveCamera(45, 800 / 600); // field of view, aspect ratio of 800x600
// Sphere and camera are at the same position. So, move back the camera a bit
camera.position.z = 20;
scene.add(camera);
// Renderer
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({ canvas });
// Define how big out canvas is
renderer.setSize(800, 600);
renderer.render(scene, camera);
对应的 HTML 文件非常简单，仅包含以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First 3D website</title>
</head>
<body>
<canvas class="webgl"></canvas>
<script type="module" src="main.js"></script>
</body>
</html>
我尝试了传递给各种函数的参数的多种组合，但在屏幕上看不到任何内容。网上找不到任何帮助。