首次使用three.js模型无法渲染，请求排查解决方案

你的代码无法渲染的核心问题是未引入Three.js库，导致浏览器无法识别THREE对象，代码根本无法执行。此外还有立方体尺寸与相机位置不匹配的问题，以下是具体修复步骤：

1. 引入Three.js库 #

在HTML文件中，于<script type="module" src="/index.js"></script>之前添加Three.js的CDN引用，确保库先于你的代码加载：

<script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script>
<script type="module" src="/index.js"></script>

2. 调整立方体尺寸与相机位置 #

当前你创建的立方体BoxGeometry(3, 64, 64)尺寸过大（高度和宽度达64单位），而相机仅在z轴5单位位置，这会导致立方体完全超出相机的视锥体范围，即使库加载正常也看不到任何内容。

修改立方体尺寸为更合理的大小，同时调整相机位置：

// 修改立方体尺寸为1x1x1
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 或者保持原尺寸，将相机拉远
camera.position.z = 100;

3. 补充灯光（可选但建议） #

你使用的MeshStandardMaterial是基于物理的材质，必须有灯光才能显示颜色。如果仅需要看到黑色几何体，不加灯光也可以，但添加基础灯光能让你看到预期的绿色：

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

修复后的完整代码示例 #

HTML文件： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="./style.css">
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          clifford: '#da373d',
        }
      }
    }
  }
</script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
    }
  </style>
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
  <!-- 引入Three.js库 -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script>
<title>Document</title>
</head>

<body class="indigo-900">
  <div class="">  
  <nav class="">
        <ol>
            <li class="home">Home</li>
            <li class="projects">Projects</li>
            <li class="education">Education</li>
            <li class="contact">Contact</li>
        </ol>
    </nav></div>
    <div class = 'intro'>
        <canvas class="computer"></canvas>
        
        <p class="intorduction"> Scroll down to know me more</p>  
      </div>
    <script type="module" src="/index.js"></script>
</body>
</html>

JS文件： #

const scene = new THREE.Scene();

// 调整立方体尺寸为1x1x1
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加基础灯光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

const camera = new THREE.PerspectiveCamera(75, 800 / 600);
scene.add(camera);
// 调整相机位置，确保能看到立方体
camera.position.z = 5;

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

额外注意事项 #

• 如果你使用type="module"加载JS文件，本地直接打开HTML会触发跨域错误，需要用本地服务器（如VS Code的Live Server插件）来运行页面。
• 检查浏览器控制台（F12）的错误信息，这是排查Three.js问题最直接的方式，之前未引入库时控制台会显示THREE is not defined的错误。

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