基于vue3.x与 three.js模拟地球内部结构

在Vue 3.x中模拟地球内部结构，并使用Three.js展示，可以通过创建一个Three.js场景，并添加地球模型和其他需要的内部结构。以下是一个简化的例子：

1. 安装Three.js:

npm install three

2. 创建一个Vue组件:

<template>
  <div ref="threeContainer"></div>
</template>
 
<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 
export default {
  name: 'EarthStructure',
  mounted() {
    this.initThreeJS();
    this.addLights();
    this.addEarth();
    this.addControls();
    this.animate();
  },
  methods: {
    initThreeJS() {
      const width = this.$refs.threeContainer.clientWidth;
      const height = this.$refs.threeContainer.clientHeight;
 
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(width, height);
      this.$refs.threeContainer.appendChild(this.renderer.domElement);
 
      this.loader = new GLTFLoader();
      this.dracoLoader = new DRACOLoader();
      this.dracoLoader.setDecoderPath('three/examples/js/libs/draco/gltf/');
      this.loader.setDRACOLoader(this.dracoLoader);
 
      this.camera.position.z = 5;
      this.scene.background = new THREE.Color(0x050505);
 
      this.animate = this.animate.bind(this);
    },
    addLights() {
      const ambientLight = new THREE.AmbientLight(0x404040);
      this.scene.add(ambientLight);
 
      const directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(1, 1, 1).normalize();
      this.scene.add(directionalLight);
    },
    addEarth() {
      this.loader.load(
        'three/examples/models/gltf/Moon.gltf',
        (gltf) => {
          gltf.scene.scale.set(0.1, 0.1, 0.1);
          this.scene.add(gltf.scene);
        },
        (xhr) => {
          console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },
        (error) => {
          console.error(error);
        }
      );
    },
    addControls() {
      this.controls = new OrbitC