HTML页面中Three.js Canvas无法显示的问题求助

问题描述 #

我正在学习Three.js，但HTML页面中的<canvas>标签无法在页面上显示。我知道相机和物体处于同一位置，但至少应该能看到Canvas的黑色方块，请问有什么解决思路？

我的HTML代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three JS</title>
</head>
<body>
    <canvas class="webgl"></canvas>
    <script src="/main.js"></script>
</body>
</html>

我的JavaScript代码： #

import * as THREE from 'three'

const scene = new THREE.Scene()

const geometry = new THREE.SphereGeometry(3, 64, 64)
const material = new THREE.MeshStandardMaterial({
    color: '#00ff83'
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

const camera = new THREE.PerspectiveCamera(45)
scene.add(camera)

const canvas = document.querySelector(".webgl")
const renderer = new THREE.WebGLRenderer({canvas})
renderer.setSize(800, 600)
renderer.render(scene, camera)

解决思路 #

• 修复ES模块加载配置：你的JS代码使用了import语法，这属于ES模块，必须给HTML中的script标签加上type="module"属性，否则浏览器会直接报错，导致代码完全不执行：

  <script type="module" src="/main.js"></script>
  

  另外，不要直接用file://协议打开本地HTML文件，ES模块会触发CORS限制，建议用本地服务器（比如npx serve）启动项目。

• 给Canvas设置基础样式：默认Canvas是inline元素，若没有样式约束，可能因高度为0或被遮挡而不可见。可以在styles.css中添加：

  .webgl {
      display: block;
      width: 800px;
      height: 600px;
      margin: 0 auto;
  }
  body {
      margin: 0;
      overflow: hidden;
  }
  

• 排查渲染核心逻辑：

  1. 先调整相机位置，确保渲染流程正常：

     const camera = new THREE.PerspectiveCamera(45, 800/600, 0.1, 1000)
     camera.position.z = 10 // 将相机向后移动，远离球体
     scene.add(camera)
     

  2. MeshStandardMaterial需要光源才能显示颜色，否则会呈现黑色，可添加基础光源测试：

     const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
     scene.add(ambientLight)
     

• 查看控制台错误：打开浏览器开发者工具（F12）的Console面板，检查是否存在Three.js库加载失败、模块导入错误等信息，这是快速定位问题的关键。

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