用vue写一个three.js示例

好的，以下是一个简单的 Vue.js + Three.js 示例，它创建了一个场景，包括一个立方体和一个灯光：

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

<script>
import * as THREE from 'three'

export default {
  name: 'ThreeScene',

  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 renderer = new THREE.WebGLRenderer()
    renderer.setSize(
      this.$refs.container.clientWidth,
      this.$refs.container.clientHeight
    )
    this.$refs.container.appendChild(renderer.domElement)

    // 创建几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1)

    // 创建材质
    const material = new THREE.MeshStandardMaterial({ color: 0xffffff })

    // 创建网格
    const mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)

    // 创建灯光
    const light = new THREE.PointLight(0xffffff, 1, 100)
    light.position.set(0, 3, 5)
    scene.add(light)

    // 渲染场景
    const animate = () => {
      requestAnimationFrame(animate)
      mesh.rotation.x += 0.01
      mesh.rotation.y += 0.01
      renderer.render(scene, camera)
    }
    animate()
  },
}
</script>

<style>
  #container {
    width: 100%;
    height: 100%;
  }
</style>

这个示例使用了 Three.js 的基础模块，并将其与 Vue.js 相结合，通过将渲染器的输出添加到组件的 DOM 元素中，实现了一个简单的三维场景。你可以根据自己的需求修改几何体、材质、灯光、相机和动画效果等参数。