nuxt.js引入three.js

要在nuxt.js中使用three.js，可以按照以下步骤操作：

1. 安装three.js

可以通过npm安装three.js:

npm install three

2. 创建一个Vue组件

在nuxt.js中，所有页面都被组织成Vue组件。要使用three.js，需要在一个组件中引入它。

可以创建一个名为`MyThreeComponent.vue`的组件，并在其中引入three.js:

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

<script>
import * as THREE from 'three';

export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const container = this.$refs.container;

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

      // 创建相机
      const camera = new THREE.PerspectiveCamera(
        45,
        container.clientWidth / container.clientHeight,
        1,
        1000
      );
      camera.position.set(0, 0, 10);

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(container.clientWidth, container.clientHeight);
      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);

      // 渲染场景
      renderer.render(scene, camera);
    },
  },
};
</script>

在这个组件中，我们创建了一个场景、一个相机、一个渲染器和一个立方体，并将它们渲染到页面上。

3. 在页面中使用组件

现在，我们可以在任何一个页面中使用这个组件了。例如，在`pages/index.vue`中，可以这样使用：

<template>
  <div>
    <MyThreeComponent />
  </div>
</template>

<script>
import MyThreeComponent from '~/components/MyThreeComponent.vue';

export default {
  components: {
    MyThreeComponent,
  },
};
</script>

在这个页面中，我们引入了`MyThreeComponent`组件，并将它渲染到页面上。

现在，当我们访问这个页面时，就会看到一个绿色的立方体在屏幕中心。

这就是在nuxt.js中使用three.js的基本步骤。当然，你可以根据自己的需求进行更多的修改和扩展。