vue three.js绘制一个三维球体

可以使用Three.js提供的SphereGeometry和MeshPhongMaterial创建一个具有光泽感的球体。以下是一个示例代码：

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

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

export default {
  mounted() {
    const container = document.getElementById('container')
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(
      75, container.clientWidth / container.clientHeight, 0.1, 1000
    )
    camera.position.z = 5
      
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(container.clientWidth, container.clientHeight)
    container.appendChild(renderer.domElement)
    
    const controls = new OrbitControls(camera, renderer.domElement)
      
    const sphereGeometry = new THREE.SphereGeometry(1, 32, 32)
    const sphereMaterial = new THREE.MeshPhongMaterial({
      color: 0xffffff,
      specular: 0x222222,
      shininess: 25
    })
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
    scene.add(sphere)
      
    const ambientLight = new THREE.AmbientLight(0x404040)
    scene.add(ambientLight)
    
    const pointLight = new THREE.PointLight(0xffffff, 1, 100)
    pointLight.position.set(10, 10, 10)
    scene.add(pointLight)
    
    const animate = function () {
      requestAnimationFrame(animate)
    
      sphere.rotation.x += 0.01
      sphere.rotation.y += 0.01
    
      renderer.render(scene, camera)
    }
    
    animate()
  }
}
</script>

这个代码在Vue.js项目中使用Three.js创建了一个带有OrbitControls（鼠标交互控制）的场景。可以根据需要修改球体的大小、材质等属性。