threejs粒子文本

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.append(renderer.domElement);
camera.position.z = 2.5;

const textCanvas = document.createElement('canvas');
const textCtx = textCanvas.getContext('2d');

const pointsGeometry = new THREE.BufferGeometry().
setFromPoints(generatePointsFromWord());
const pointsMaterial = new THREE.PointsMaterial({
  size: 0.01, sizeAttenuation: true, color: 'hsl(280, 100%, 50%)' });

const points = new THREE.Points(pointsGeometry, pointsMaterial);
scene.add(points);

window.addEventListener('resize', onResize);
requestAnimationFrame(draw);

function map(n, a, b, c, d) {
  return (n - a) * (d - c) / (b - a) + c;
}

function generatePointsFromWord(text = 'jQuery') {
  textCtx.resetTransform();
  textCtx.clearRect(0, 0, textCanvas.width, textCanvas.height);
  textCtx.fillStyle = 'white';
  let h = map(text.length, 4, 25, 48, 12);
  textCtx.font = `bold ${h}px Roboto`;
  textCtx.textBaseline = 'middle';
  textCtx.textAlign = 'center';
  let w = Math.floor(textCtx.measureText(text).width);
  textCtx.fillText(text, w * 0.5, h * 0.5);
  let imgData = textCtx.getImageData(0, 0, w, h);
  textCtx.clearRect(0, 0, textCanvas.width, textCanvas.height);
  return generatePointsFromImgData(imgData);
}

function draw(e) {
  requestAnimationFrame(draw);
  let time = e * 0.002;
  points.rotation.z = Math.cos(time * 1.2) * 0.15;
  points.rotation.y = Math.sin(time) * 0.4;
  points.scale.z = Math.tan(map(Math.cos(time * 0.6), -1, 1, 1, 2.5));
  renderer.render(scene, camera);
}

function onResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg