nuxt引入Three.js
时间: 2024-02-05 10:03:35 浏览: 30
要在Nuxt项目中引入Three.js,您可以执行以下步骤:
1. 安装Three.js
您可以通过npm安装Three.js:
```bash
npm install three
```
2. 创建Vue组件
在Nuxt项目中,您可以在pages目录下创建一个Vue组件,例如`three.vue`:
```vue
<template>
<div ref="container"></div>
</template>
<script>
import * as THREE from 'three'
export default {
mounted() {
// 创建场景
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)
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>
```
在`mounted`钩子中,我们创建了一个场景、相机和渲染器,并在场景中添加了一个立方体。然后我们使用`requestAnimationFrame`函数来渲染场景。
3. 添加路由
在`pages`目录下创建一个名为`three.vue`的文件后,您需要将其添加到Nuxt路由中。在nuxt.config.js中导出一个包含路由配置对象的对象:
```js
module.exports = {
router: {
routes: [
{
path: '/three',
component: '~/pages/three.vue'
}
]
}
}
```
现在,您可以通过访问`/three`来查看Three.js立方体的动画效果。
注意:如果您想在多个组件中使用Three.js,最好将Three.js实例化为Vue插件或将其作为单独的模块导入。