一、版本

“three”: “^0.152.2”,

二、3D粒子波浪效果

<template><div class="LatheBufferGeometry"></div>
</template>
<script>
import * as THREE from "three"
export default {name: 'LatheBufferGeometry',setup() {var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;var container;var camera, scene, renderer;var particles, particle, count = 0;var mouseX = 0, mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;// setTimeout(() => {//   console.log(THREE)//   init();//   animate();// }, 10000)// function init() {//   container = document.createElement('div');//   document.body.appendChild(container);//   camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);//   camera.position.z = 1000;//   scene = new THREE.Scene();//   particles = new Array();//   var PI2 = Math.PI * 2;//   var material = new THREE.ParticleCanvasMaterial({//     color: 0xffffff,//     program: function (context) {//       context.beginPath();//       context.arc(0, 0, 1, 0, PI2, true);//       context.fill();//     }//   });//   var i = 0;//   for (var ix = 0; ix < AMOUNTX; ix++) {//     for (var iy = 0; iy < AMOUNTY; iy++) {//       particle = particles[i++] = new THREE.Particle(material);//       particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);//       particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);//       scene.add(particle);//     }//   }//   renderer = new THREE.CanvasRenderer();//   renderer.setSize(window.innerWidth, window.innerHeight);//   container.appendChild(renderer.domElement);//   document.addEventListener('mousemove', onDocumentMouseMove, false);//   document.addEventListener('touchstart', onDocumentTouchStart, false);//   document.addEventListener('touchmove', onDocumentTouchMove, false);//   ////   window.addEventListener('resize', onWindowResize, false);// }// function onWindowResize() {//   windowHalfX = window.innerWidth / 2;//   windowHalfY = window.innerHeight / 2;//   camera.aspect = window.innerWidth / window.innerHeight;//   camera.updateProjectionMatrix();//   renderer.setSize(window.innerWidth, window.innerHeight);// }// //// function onDocumentMouseMove(event) {//   mouseX = event.clientX - windowHalfX;//   mouseY = event.clientY - windowHalfY;// }// function onDocumentTouchStart(event) {//   if (event.touches.length === 1) {//     event.preventDefault();//     mouseX = event.touches[0].pageX - windowHalfX;//     mouseY = event.touches[0].pageY - windowHalfY;//   }// }// function onDocumentTouchMove(event) {//   if (event.touches.length === 1) {//     event.preventDefault();//     mouseX = event.touches[0].pageX - windowHalfX;//     mouseY = event.touches[0].pageY - windowHalfY;//   }// }// //// function animate() {//   requestAnimationFrame(animate);//   render();// }// function render() {//   camera.position.x += (mouseX - camera.position.x) * .05;//   camera.position.y += (- mouseY - camera.position.y) * .05;//   camera.lookAt(scene.position);//   var i = 0;//   for (var ix = 0; ix < AMOUNTX; ix++) {//     for (var iy = 0; iy < AMOUNTY; iy++) {//       particle = particles[i++];//       particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);//       particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2;//     }//   }//   renderer.render(scene, camera);//   count += 0.1;// }const init = () => {container = document.createElement('div')document.body.appendChild(container)camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)camera.position.z = 1000scene = new THREE.Scene()// 添加背景图// const texture = new THREE.TextureLoader().load(require('../assets/img/index/home-bg.png'))// scene.background = textureparticles = []const PI2 = Math.PI * 1const material = new THREE.SpriteMaterial({color: '#DFF9FE',program: (context) => {context.beginPath()context.arc(0, 0, 1, 0, PI2, true)context.fill()}})let i = 0for (let ix = 0; ix < AMOUNTX; ix++) {for (let iy = 0; iy < AMOUNTY; iy++) {particle = particles[i++] = new THREE.Sprite(material)particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2)particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2)scene.add(particle)}}renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })// 设置透明度renderer.setClearAlpha(0.2)renderer.setSize(window.innerWidth, window.innerHeight)container.appendChild(renderer.domElement)document.addEventListener('mousemove', onDocumentMouseMove, false)document.addEventListener('touchstart', onDocumentTouchStart, false)document.addEventListener('touchmove', onDocumentTouchMove, false)window.addEventListener('resize', onWindowResize, false)}const onWindowResize = () => {windowHalfX = window.innerWidth / 2windowHalfY = window.innerHeight / 2camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}const onDocumentMouseMove = (event) => {mouseX = event.clientX - windowHalfXmouseY = event.clientY - windowHalfY}const onDocumentTouchStart = (event) => {if (event.touches.length === 1) {event.preventDefault()mouseX = event.touches[0].pageX - windowHalfXmouseY = event.touches[0].pageY - windowHalfY}}const onDocumentTouchMove = (event) => {if (event.touches.length === 1) {event.preventDefault()mouseX = event.touches[0].pageX - windowHalfXmouseY = event.touches[0].pageY - windowHalfY}}const animate = () => {// stats.begin()// stats.end()requestAnimationFrame(animate)render()}const render = () => {camera.position.x += (mouseX - camera.position.x) * 0.05camera.position.y += (-mouseY - camera.position.y) * 0.05camera.lookAt(scene.position)let i = 0for (let ix = 0; ix < AMOUNTX; ix++) {for (let iy = 0; iy < AMOUNTY; iy++) {particle = particles[i++]particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50)particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2}}renderer.render(scene, camera)count += 0.1}setTimeout(() => {console.log(THREE)// 初始化init()animate()}, 1000)}
}
</script>