<script setup> import HelloWorld from './components/HelloWorld.vue' import TheWelcome from './components/TheWelcome.vue' </script> <template> <div class='container' ref='container'></div> </template> <script> import * as THREE from "three"; import {ref} from "vue"; import {onMounted} from "vue"; import {OrbitControls} from "three/examples/jsm/controls/OrbitControls" const scene=new THREE.Scene() const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000) camera.position.z=5 const renderer=new THREE.WebGLRenderer() renderer.setSize(window.innerWidth,window.innerHeight) 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) function render(){ renderer.render(scene, camera); requestAnimationFrame(render); } const container=ref(null) function fun(){ const controls=new OrbitControls(camera,container.value) controls.enableDamping=true container.value.appendChild(renderer.domElement); render() } onMounted(fun); </script> <style > *{ margin:0; padding:0; } .container{ height:100vh; width:100vw; bcakground-color:#f0f0f0; } </style>帮我检查以上代码并改正

在代码中，`bcakground-color`应该改为`background-color`，以修正样式错误。此外，需要将组件导入语句放入`<script>`标签中，并且将组件添加到模板中，以便正确地渲染组件。修改后的代码如下：

<template>
  <div class="container" ref="container">
    <HelloWorld />
    <TheWelcome />
  </div>
</template>

<script>
  import * as THREE from "three";
  import { ref } from "vue";
  import { onMounted } from "vue";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  import HelloWorld from './components/HelloWorld.vue';
  import TheWelcome from './components/TheWelcome.vue';

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 5;
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  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);

  function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }

  const container = ref(null);

  function fun() {
    const controls = new OrbitControls(camera, container.value);
    controls.enableDamping = true;
    container.value.appendChild(renderer.domElement);
    render();
  }

  export default {
    components: {
      HelloWorld,
      TheWelcome
    },
    setup() {
      onMounted(fun);
    },
    setup() {
      onMounted(fun);
    },
  };
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    height: 100vh;
    width: 100vw;
    background-color: #f0f0f0;
  }
</style>