nuxt.js引入旋转地球

要在Nuxt.js中引入旋转地球，可以使用Three.js来创建3D场景并在场景中添加旋转地球模型。以下是一个简单的示例代码：

1. 安装Three.js

在终端中运行以下命令：

npm install three

2. 创建地球模型

创建一个Vue组件，可以在组件的mounted钩子中创建地球模型。首先，我们需要导入Three.js的必要组件：

import * as THREE from 'three'

然后，在mounted钩子中创建场景、相机和地球模型：

mounted() {
  // 创建场景
  const scene = new THREE.Scene()

  // 创建相机
  const camera = new THREE.PerspectiveCamera(
    75,
    this.$refs.container.clientWidth / this.$refs.container.clientHeight,
    0.1,
    1000
  )
  camera.position.z = 5

  // 创建地球模型
  const geometry = new THREE.SphereGeometry(1, 32, 32)
  const texture = new THREE.TextureLoader().load('earth.jpg')
  const material = new THREE.MeshBasicMaterial({ map: texture })
  const earth = new THREE.Mesh(geometry, material)
  scene.add(earth)

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(
    this.$refs.container.clientWidth,
    this.$refs.container.clientHeight
  )
  this.$refs.container.appendChild(renderer.domElement)

  // 渲染场景
  const animate = function () {
    requestAnimationFrame(animate)
    earth.rotation.y += 0.01
    renderer.render(scene, camera)
  }
  animate()
}

注意，我们在场景中添加了地球模型，并使用requestAnimationFrame函数实现了动画效果。在每一帧中，我们将地球模型绕y轴旋转0.01弧度。

3. 添加样式

最后，我们需要在组件的template中添加一个包含渲染器的容器，并为容器添加样式：

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

<style>
.container {
  width: 100%;
  height: 400px;
}
</style>

现在，我们就可以在Nuxt.js应用程序中引入旋转地球了。