|
| 1 | +/** |
| 2 | + * Created by lichb on 2017/4/10. |
| 3 | + */ |
| 4 | +import { |
| 5 | + Scene, |
| 6 | + PerspectiveCamera, |
| 7 | + WebGLRenderer, |
| 8 | + Texture, |
| 9 | + Vector3, |
| 10 | + SpriteMaterial, |
| 11 | + Object3D, |
| 12 | + Sprite, |
| 13 | + Math2 |
| 14 | +} from 'three'; |
| 15 | +const SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50; // 圆点间隔、x轴方向个数、y轴方向个数 |
| 16 | +const waveStep = 0.04; // 波动速度 |
| 17 | +const rotateStep = 0.02; // 旋转速度 |
| 18 | +const CAMERAMOVERADIUS = 1000; // 相机旋转半径 |
| 19 | +const cameraDefPos = new Vector3(0, 180, CAMERAMOVERADIUS); // 相机初始位置 |
| 20 | +const focusDefPos = new Vector3(0, 700, 0); // 相机注视点位置 |
| 21 | + |
| 22 | +let container; // canvas容器 |
| 23 | +let scene, camera, renderer; |
| 24 | +let particles, particle, count = 0; |
| 25 | +let theta = 0; |
| 26 | +let focusObject; |
| 27 | + |
| 28 | +// 生成贴图 |
| 29 | +function generateTexture() { |
| 30 | + let canvas = document.createElement('canvas'); |
| 31 | + let context = canvas.getContext('2d'); |
| 32 | + canvas.width = 128; |
| 33 | + canvas.height = 128; |
| 34 | + drawCircle(context, {x: 64, y: 64, r: 60, c: '#fff'}); |
| 35 | + return canvas; |
| 36 | +} |
| 37 | + |
| 38 | +// 画圆 |
| 39 | +function drawCircle(context, arg) { |
| 40 | + let PI2 = Math.PI * 2; |
| 41 | + arg = arg || {x: 0, y: 0, r: 0.5, c: '#fff'}; |
| 42 | + context.fillStyle = arg.c; |
| 43 | + context.beginPath(); |
| 44 | + context.arc(arg.x, arg.y, arg.r, 0, PI2, true); |
| 45 | + context.fill(); |
| 46 | +} |
| 47 | + |
| 48 | +// 生成材质 |
| 49 | +function getMaterial() { |
| 50 | + let texture = new Texture(generateTexture()); |
| 51 | + texture.needsUpdate = true; // important! |
| 52 | + let material = new SpriteMaterial({color: 0xffffff, map: texture}); |
| 53 | + return material; |
| 54 | +} |
| 55 | + |
| 56 | +function onWindowResize() { |
| 57 | + camera.aspect = container.clientWidth / container.clientHeight; |
| 58 | + camera.updateProjectionMatrix(); |
| 59 | + renderer.setSize(container.clientWidth, container.clientHeight); |
| 60 | +} |
| 61 | + |
| 62 | +function drawWaves() { |
| 63 | + camera = new PerspectiveCamera(100, container.clientWidth / container.clientHeight, 1, 10000); |
| 64 | + camera.position.x = cameraDefPos.x; |
| 65 | + camera.position.y = cameraDefPos.y; |
| 66 | + camera.position.z = cameraDefPos.z; |
| 67 | + |
| 68 | + scene = new Scene(); |
| 69 | + |
| 70 | + focusObject = new Object3D(); |
| 71 | + focusObject.position.x = focusDefPos.x; |
| 72 | + focusObject.position.y = focusDefPos.y; |
| 73 | + focusObject.position.z = focusDefPos.z; |
| 74 | + scene.add(focusObject); |
| 75 | + |
| 76 | + particles = []; |
| 77 | + let material = getMaterial(); |
| 78 | + let i = 0; |
| 79 | + for (let ix = 0; ix < AMOUNTX; ix++) { |
| 80 | + for (let iy = 0; iy < AMOUNTY; iy++) { |
| 81 | + particle = particles[i++] = new Sprite(material); |
| 82 | + particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION - 1) / 2); |
| 83 | + particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION - 1) / 2); |
| 84 | + scene.add(particle); |
| 85 | + } |
| 86 | + } |
| 87 | + |
| 88 | + renderer = new WebGLRenderer({alpha: true}); |
| 89 | + renderer.setPixelRatio(window.devicePixelRatio); |
| 90 | + renderer.setSize(container.clientWidth, container.clientHeight); |
| 91 | + container.appendChild(renderer.domElement); |
| 92 | + window.addEventListener('resize', onWindowResize, false); |
| 93 | +} |
| 94 | + |
| 95 | +function animate() { |
| 96 | + requestAnimationFrame(animate); |
| 97 | + render(); |
| 98 | +} |
| 99 | + |
| 100 | +function render() { |
| 101 | + let i = 0; |
| 102 | + for (let ix = 0; ix < AMOUNTX; ix++) { |
| 103 | + for (let iy = 0; iy < AMOUNTY; iy++) { |
| 104 | + particle = particles[i++]; |
| 105 | + particle.position.y = (Math.sin((ix + count) * 0.3) * 26) + |
| 106 | + (Math.sin((iy + count) * 0.4) * 26); |
| 107 | + particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 3 + |
| 108 | + (Math.sin((iy + count) * 0.4) + 1) * 3; |
| 109 | + } |
| 110 | + } |
| 111 | + |
| 112 | + theta += rotateStep; |
| 113 | + camera.position.x = CAMERAMOVERADIUS * Math.sin(Math2.degToRad(theta)); |
| 114 | + camera.position.z = CAMERAMOVERADIUS * Math.cos(Math2.degToRad(theta)); |
| 115 | + camera.lookAt(focusObject.position); |
| 116 | + |
| 117 | + renderer.render(scene, camera); |
| 118 | + count += waveStep; |
| 119 | +} |
| 120 | + |
| 121 | +export default { |
| 122 | + init(id) { |
| 123 | + container = document.querySelector('#' + id); |
| 124 | + drawWaves(); |
| 125 | + animate(); |
| 126 | + }, |
| 127 | + removeEvent(){ |
| 128 | + window.removeEventListener('resize', onWindowResize); |
| 129 | + } |
| 130 | +} |
0 commit comments