Three.js画布无法渲染且无报错，寻求技术解决方案

你的代码存在两个核心问题，导致页面无法渲染内容：

• 模块导入逻辑错误：你仅导入了Camera、Material、Texture三个零散类，但代码中却在使用THREE.WebGLRenderer、THREE.PerspectiveCamera等全局THREE命名空间下的对象。ES模块模式下不会自动暴露全局THREE对象，这些引用实际无效。
• 主函数未执行：你定义了main()渲染逻辑函数，但没有调用它，导致整个渲染流程根本没启动。

修正后的完整代码 #

<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">
    <title>Three.js Cube Demo</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="c"></canvas>
    <script type="module">
    // 导入完整Three.js核心库并命名为THREE
    import * as THREE from "https://cdn.skypack.dev/three@0.132.2";
    import { OrbitControls } from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js";
      
    function main() {
        const canvas = document.getElementById('c');
        const renderer = new THREE.WebGLRenderer({canvas});
        const fov = 75;
        const aspect = window.innerWidth / window.innerHeight;  // 修正为窗口实际比例
        const near = 0.1;
        const far = 5;
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
        camera.position.z = 2;
        
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);  // 添加浅灰背景方便观察
        
        const boxWidth = 1;
        const boxHeight = 1;
        const boxDepth = 1;
        const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
        const material = new THREE.MeshNormalMaterial();  // 无需光照即可显示立方体面
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        
        // 添加轨道控制器支持交互旋转
        const controls = new OrbitControls(camera, canvas);
        controls.target.set(0, 0, 0);
        controls.update();
        
        // 渲染循环+窗口自适应
        function render() {
            if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
                renderer.setSize(window.innerWidth, window.innerHeight, false);
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
            }
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        requestAnimationFrame(render);
    }
    // 调用主函数启动渲染流程
    main();
    </script>
</body>
</html>

额外优化说明 #

• 修正相机宽高比为窗口实际比例，避免立方体拉伸变形
• 添加窗口大小自适应逻辑，保证窗口缩放时渲染正常
• 改用MeshNormalMaterial，无需额外光照就能清晰展示立方体结构
• 加入OrbitControls支持鼠标拖拽旋转查看立方体
• 设置浅灰色场景背景，区分画布与页面背景

内容的提问来源于stack exchange，提问作者이재동