一、版本
“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>
