一个使用three.js的vue项目参考
时间: 2024-05-15 14:15:31 浏览: 10
以下是一个使用three.js的vue项目参考:
1. 创建一个vue项目并安装three.js:
```
vue create myproject
cd myproject
npm install three --save
```
2. 在App.vue中引入three.js:
```
<template>
<div id="app">
<canvas id="canvas"></canvas>
</div>
</template>
<script>
import * as THREE from 'three'
export default {
name: 'App',
mounted() {
const canvas = document.getElementById('canvas')
const renderer = new THREE.WebGLRenderer({canvas})
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000)
camera.position.z = 5
const scene = new THREE.Scene()
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({color: 0x00ff00})
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
function animate() {
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera)
}
animate()
}
}
</script>
```
3. 运行项目:
```
npm run serve
```
4. 打开浏览器访问 http://localhost:8080/ ,可以看到一个旋转的绿色立方体。
以上就是一个简单的使用three.js的vue项目参考。通过这个项目,你可以了解到如何在vue项目中引入three.js,并创建一个简单的场景。