Scene.svelte

<!-- Bind a container first then onMount add the renderer to this container -->
<script>
    import { onMount } from 'svelte';
    import * as THREE from 'three';
    let container;
    onMount(async () => {
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        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 } );
        const cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;
    });
</script>

<div id="container" bind:this={container}/>

App.svelte

<script>
  import { onMount, onDestroy } from "svelte";
  import Navbar from './components/Navbar.svelte';
  import Hero from "./components/Hero.svelte";
  import Content from "./components/Content.svelte";
  import About from "./components/About.svelte";
  import Work from "./components/Work.svelte";
  import Projects from "./components/Projects.svelte";
  import Accordion from "./components/Accordion.svelte";
  import Skills from "./components/Skills.svelte";
  import Experience from "./components/Experience.svelte";
  import Contact from "./components/Contact.svelte";

  import Scene from "./components/Scene.svelte";

  import './assets/stylesheets/content.css';
  import './assets/stylesheets/navbar-862-and-up.css';
  import './assets/stylesheets/navbar-862-down.css';
</script>

<!-- <Navbar/>
<Content>
  <Hero slot="landing-section"/>
  <About slot="about-section"/>
  <Work slot="work-group-section">
    <Projects slot="projects-section">
      <Accordion slot="accordion-group" repos={included}/>      
    </Projects>
    <Skills slot="skills-section"/>
    
    <Experience slot="exp-section" min_year={min_year} max_year={max_year} on:changeYear={fetch_contribs}/>
  </Work>
  <Contact slot="contact-section" on:sendMail={send_mail}/>
</Content> -->
<Scene/>

为了简单起见，我已经注解了一些代码，但这里是我的主App.svelte文件，Scene.svelte文件实际上来自App.svelte主目录中的一个名为components的文件夹。
我试过安装threlte，我之所以只安装three.js而不安装threlte，是因为一开始我也遇到了threlte的问题，因为它在我的屏幕上只呈现了一个“sad face”类型的svg。
我试过threlte，用一个简单的实时服务器和一个.html文件渲染，现在这个，什么都不工作。该怎么办呢？