当前位置:   article > 正文

vue中使用three绘制星空效果_vue2 +threejs 特效

vue2 +threejs 特效


关于使用three绘制星空效果的记录


一、Three.js 是什么?

Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。

二、使用步骤

1.引入库

首先npm install three

import * as THREE from "three";
  • 1

2.开始绘制星空

data中定义变量

  data() {
    return {
      camera: null,
      scene: null,
      starsGeometry: null,
      starField:null,
      renderer: null,
    }
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

创建相机渲染器等

    inti(){
      this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
      this.camera.position.z = 1400;
      this.scene = new THREE.Scene();
      this.starInti()
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true,});
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      // this.renderer.domElement.style.position = 'absolute';
      document.getElementById('threeStar').appendChild(this.renderer.domElement);
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

生成星空

starInti() {
      //星空
      this.starsGeometry = new THREE.Geometry();
      //生成点的位置
      for (var i = 0; i < 12000; i++) {
        var star = new THREE.Vector3();
        //THREE.Math.randFloatSpread 在区间内随机浮动* - 范围 / 2 *到* 范围 / 2 *内随机取值。
        star.x = THREE.Math.randFloatSpread(2000);
        star.y = THREE.Math.randFloatSpread(2000);
        star.z = THREE.Math.randFloatSpread(2000);
        this.starsGeometry.vertices.push(star);
      }
      var starsMaterial = new THREE.PointsMaterial({ color: '#fff',sizeAttenuation: false });
      this.starField = new THREE.Points(this.starsGeometry, starsMaterial);
      this.scene.add(this.starField);
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

定义动画

    animate() {
      requestAnimationFrame(this.animate);

      //星空旋转可通过镜头旋转或者物体旋转实现
        // this.camera.rotation.y = this.camera.rotation.y -0.0005 //镜头旋转
      this.starField.rotation.y+=0.0002
      this.starField.rotation.x+=0.0002
      this.starField.rotation.z+=0.0002
      this.render();
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

渲染

render() {
      this.renderer.render(this.scene, this.camera);
    },
  • 1
  • 2
  • 3

在mounted中调用方法

  mounted() {
    this.inti()
    this.animate()
    this.render()
  },
  • 1
  • 2
  • 3
  • 4
  • 5

div

<template>
  <div id="threeStar" ref="threeStar"></div>
</template>
  • 1
  • 2
  • 3

样式

<style lang="scss" scoped>
#threeStar {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 9;
  //bottom: 4vh;
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述


总结

以上就是使用threejs绘制简单星空效果,在要应用的vue页面引入该组件即可。

本文内容由网友自发贡献,转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/121642
推荐阅读
相关标签
  

闽ICP备14008679号