Svelte应用中Three.js场景无法渲染的问题求助

你的Three.js场景无法显示，核心问题集中在以下几点：

1. 缺少渲染逻辑 #

Three.js不会自动渲染场景，必须手动调用renderer.render(scene, camera)，且需要通过requestAnimationFrame维持渲染循环——哪怕是静态场景，至少也要调用一次render，否则画面永远不会被绘制。

2. 容器元素无尺寸 #

你绑定的<div id="container">默认没有宽高样式，浏览器会将其高度计算为0，导致内部的canvas元素完全不可见。

3. 未处理组件生命周期清理 #

组件销毁时如果不清理动画循环和DOM元素，会导致内存泄漏，但这不是当前不显示的直接原因。

修正后的Scene.svelte代码 #

<script>
    import { onMount, onDestroy } from 'svelte';
    import * as THREE from 'three';

    let container;
    let scene, camera, renderer, cube, animationId;

    onMount(() => {
        // 初始化场景、相机
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
        camera.position.z = 5;

        // 初始化渲染器
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(container.clientWidth, container.clientHeight);
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1;
        renderer.outputEncoding = THREE.sRGBEncoding;
        container.appendChild(renderer.domElement);

        // 添加立方体
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 渲染循环
        const animate = () => {
            animationId = requestAnimationFrame(animate);
            // 可选：添加旋转动画，验证场景是否正常
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        };
        animate();

        // 窗口resize处理
        const handleResize = () => {
            camera.aspect = container.clientWidth / container.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(container.clientWidth, container.clientHeight);
        };
        window.addEventListener('resize', handleResize);

        // 返回清理函数
        return () => {
            window.removeEventListener('resize', handleResize);
            cancelAnimationFrame(animationId);
            renderer.dispose();
            container.removeChild(renderer.domElement);
        };
    });
</script>

<!-- 给容器设置宽高样式，确保占满视口 -->
<div 
    id="container" 
    bind:this={container}
    style="width: 100vw; height: 100vh; margin: 0; padding: 0; overflow: hidden;"
/>

额外注意事项 #

1. 自定义容器尺寸：如果不想让Three.js场景占满整个视口，可以修改容器的width和height样式，比如设置固定值或百分比，但要确保容器有明确的尺寸。
2. Threlte问题排查：之前用Threlte显示"悲伤脸"，大概率是依赖安装不完整或版本不兼容，后续若想改用Threlte，需确保@threlte/core和three版本匹配。
3. 单独HTML文件测试：如果单独HTML文件也无法显示，检查浏览器控制台是否有报错（比如WebGL不支持、Three.js加载失败），可直接在控制台输入THREE确认库是否加载成功。

内容的提问来源于stack exchange，提问作者Mig Rivera Cueva