2023.9.12今天我學(xué)習(xí)了vue2+three.js實(shí)現(xiàn)一個(gè)好看的動態(tài)效果：

首先是安裝：

npm install three

相關(guān)代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-708136.html

<!--3d宇宙效果-->
<template>
  <div>
    <div id="content" />
  </div>
</template>
<script>
import * as THREE from 'three'

export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      mesh: null,
      light: null,
      stars: null,
      mesh3: null
    }
  },
  mounted() {
    this.init()
    this.animate()
  },
  methods: {
    init() {
      // 創(chuàng)建場景
      this.createScene()
      //創(chuàng)建照相機(jī)
      this.createCamera()
      // 創(chuàng)建渲染器
      this.createRenderer()
      // 創(chuàng)建物體
      this.createMesh()
      // 創(chuàng)建星空
      this.createStars()
      //觸發(fā)
      this.render()
    },
    // 創(chuàng)建場景
    createScene() {
      this.scene = new THREE.Scene()
      this.light = new THREE.DirectionalLight(0xffffff, 1)
      this.light.position.set(100, 100, 100)
      this.scene.add(this.light)
    },
    createStars() {
      const geometry = new THREE.BufferGeometry()
      const positions = []
      for (let i = 0; i < 10000; i++) {
        const x = THREE.MathUtils.randFloatSpread(2000)
        const y = THREE.MathUtils.randFloatSpread(2000)
        const z = THREE.MathUtils.randFloatSpread(2000)
        positions.push(x, y, z)
      }
      geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
      const material = new THREE.PointsMaterial({color: 0xffffff})
      this.stars = new THREE.Points(geometry, material)
      this.scene.add(this.stars)
    },
    // 創(chuàng)建相機(jī)
    createCamera() {
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
      this.camera.position.set(200, 200, 200)
      this.camera.lookAt(this.scene.position) // 設(shè)置相機(jī)方向(指向的場景對象)
    },
    // 創(chuàng)建渲染器
    createRenderer() {
      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.renderer.setClearColor(new THREE.Color(0x000000))
      document.getElementById('content').appendChild(this.renderer.domElement)
    },
    // 創(chuàng)建物體
    createMesh() {
      let geometry1 = new THREE.SphereGeometry(40, 40, 40)
      let material1 = new THREE.MeshLambertMaterial({
        color: 0x00ff00
      })
      this.mesh = new THREE.Mesh(geometry1, material1)
      this.mesh.position.set(0, 0, 0)
      this.scene.add(this.mesh)

      let geometry2 = new THREE.SphereGeometry(50, 50, 50)
      let material2 = new THREE.MeshLambertMaterial({
        color: 0xADD8E6
      })
      let mesh2 = new THREE.Mesh(geometry2, material2)
      mesh2.position.set(-40, 0, 0)
      this.scene.add(mesh2)

      let geometry3 = new THREE.SphereGeometry(30, 50, 50)
      let material3 = new THREE.MeshLambertMaterial({
        color: 0x800080
      })
      this.mesh3 = new THREE.Mesh(geometry3, material3)
      this.mesh3.position.set(160, 0, 0)
      this.scene.add(this.mesh3)

      let geometry4 = new THREE.SphereGeometry(35, 50, 50)
      let material4 = new THREE.MeshLambertMaterial({
        color: 0xFFFF00
      })
      let mesh4 = new THREE.Mesh(geometry4, material4)
      mesh4.position.set(-20, 80, 150)
      this.scene.add(mesh4)

      let geometry5 = new THREE.SphereGeometry(15, 50, 50)
      let material5 = new THREE.MeshLambertMaterial({
        color: 0x0000FF
      })
      let mesh5 = new THREE.Mesh(geometry5, material5)
      mesh5.position.set(120, 80, -80)
      this.scene.add(mesh5)

      this.render()
    },
    // 觸發(fā)
    render() {
      this.renderer.render(this.scene, this.camera)
    },
    animate() {
      // 計(jì)算時(shí)間差
      const time = Date.now() * 0.001
      // 根據(jù)時(shí)間變化更新球體和光源的位置
      this.mesh.position.set(100 * Math.cos(time), 100 * Math.sin(time), 0)
      this.mesh3.position.set(0, 50 * Math.cos(time), 100 * Math.sin(time))
      this.light.position.set(50 * Math.cos(time), 50 * Math.sin(time), 0)
      // 觸發(fā)渲染
      this.render()
      // 不斷循環(huán)調(diào)用 animate 函數(shù)
      requestAnimationFrame(this.animate)
    },
  }
}
</script>

到了這里，關(guān)于vue2+three.js實(shí)現(xiàn)宇宙（進(jìn)階版）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！