nuxt引入Three

.js（Nuxt.js + Three.js）

Three.js是一个基于WebGL的JavaScript 3D库，它非常适合用于创建3D动画和游戏。而Nuxt.js是一个基于Vue.js的通用应用框架，它的主要特点是易于使用和高度可扩展。

在Nuxt.js中引入Three.js非常简单，只需要在nuxt.config.js中配置如下：

module.exports = {
  head: {
    script: [
      { src: 'https://cdn.bootcdn.net/ajax/libs/three.js/r124/three.min.js' }
    ]
  }
}

这里我们使用了CDN方式引入了Three.js的最新版本。然后我们可以在Vue组件中使用Three.js来创建3D场景，例如：

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

<script>
import * as THREE from 'three'

export default {
  mounted() {
    const width = this.$refs.container.clientWidth
    const height = this.$refs.container.clientHeight

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

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
    camera.position.z = 5

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

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

    // 动画循环
    const animate = () => {
      requestAnimationFrame(animate)

      cube.rotation.x += 0.01
      cube.rotation.y += 0.01

      renderer.render(scene, camera)
    }

    animate()
  }
}
</script>

这里我们创建了一个简单的立方体，并通过动画循环来实现立方体的旋转。最后将渲染器的DOM元素添加到组件中的容器中。

当然，这只是一个简单的示例，我们可以使用Three.js创建更加复杂的3D场景和动画。