vue2 three.js 地球

以下是使用Vue2和Three.js制作旋转地球的步骤：

1. 首先，需要在Vue项目中安装Three.js。可以使用以下命令进行安装：

   npm install three --save

2. 在Vue组件中引入Three.js和需要的其他库：

   import * as THREE from 'three'
   import TWEEN from '@tweenjs/tween.js'
   import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

3. 在Vue组件中创建Three.js场景、相机、渲染器和控制器：

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

   // 创建相机
   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
   camera.position.set(150, 50, 200)

   // 创建渲染器
   const renderer = new THREE.WebGLRenderer({ antialias: true })
   renderer.setSize(window.innerWidth, window.innerHeight)
   document.body.appendChild(renderer.domElement)

   // 创建控制器
   const controls = new OrbitControls(camera, renderer.domElement)
   controls.enableDamping = true
   controls.dampingFactor = 0.05
   controls.rotateSpeed = 0.5

4. 创建地球模型并添加到场景中：

   // 创建地球模型
   const earthGeometry = new THREE.SphereGeometry(50, 32, 32)
   const earthTexture = new THREE.TextureLoader().load('earth.jpg')
   const earthMaterial = new THREE.MeshBasicMaterial({ map: earthTexture })
   const earthMesh = new THREE.Mesh(earthGeometry, earthMaterial)

   // 添加地球模型到场景中
   const earthGrp = new THREE.Group()
   earthGrp.add(earthMesh)
   scene.add(earthGrp)

5. 创建地球和相机的动画效果：

   // 创建相机动画
   const camearAnimation = new TWEEN.Tween(camera.position)
     .to(new THREE.Vector3(150, 50, 200), 5000)
     .easing(TWEEN.Easing.Quadratic.InOut)
     .onUpdate(() => {
       controls.update()
     })
     .start()

   // 创建地球动画
   const earthAnimation = new TWEEN.Tween(earthGrp.rotation)
     .to(new THREE.Vector3(0, Math.PI * 2, 0), 10000)
     .easing(TWEEN.Easing.Linear.None)
     .repeat(Infinity)
     .start()

6. 在Vue组件的`mounted`钩子函数中启动渲染循环：

   // 渲染循环
   function render() {
     requestAnimationFrame(render)
     TWEEN.update()
     renderer.render(scene, camera)
   }

   // 启动渲染循环
   render()

7. 最后，需要在Vue组件的`destroyed`钩子函数中清除渲染器：

   // 清除渲染器
   function cleanup() {
     renderer.dispose()
   }

   // 在组件销毁时清除渲染器
   this.$once('hook:destroyed', cleanup)

至此，我们就完成了使用Vue2和Three.js制作旋转地球的过程。