三木的创意空间 - 3D交互体验展示

ThreeJS Toys：为前端注入艺术灵魂的 3D 工具库

ThreeJS Toys 是基于 Three.js 构建的轻量级组件集合，旨在帮助开发者快速实现令人惊艳的 3D 效果。无论是背景动画、粒子特效，还是交互式光标，只需几行代码，即可为网页增添丰富的视觉层次。

虽然该仓库目前已停止维护，但原有的组件依然可用，且在社区中广受欢迎。地址：https://github.com/klevron/threejs-toys?tab=readme-ov-file (opens in a new tab)

案例预览

ThreeJS Toys 提供多个即插即用的组件，案例列表查看：https://codepen.io/collection/yrbrrk。 (opens in a new tab)

Fishes 背景动画

模拟鱼群自在游动的逼真效果，适合科技类或海洋主题网页，瞬间提升页面质感

import { fishesBackground } from 'https://unpkg.com/[email protected]/build/threejs-toys.module.cdn.min.js'
 
const bg = fishesBackground({
  el: document.getElementById('app'),
  eventsEl: document.body,
  gpgpuSize: 96,
  background: 0x031F48,
  fogDensity: 0.025,
  texture: 'https://assets.codepen.io/33787/fishes.png',
  textureCount: 8,
  material: 'phong',
  materialParams: {
    transparent: true,
    alphaTest: 0.5
  },
  fishScale: [1, 1, 1],
  fishWidthSegments: 8,
  fishSpeed: 1.5,
  noiseCoordScale: 0.01,
  noiseTimeCoef: 0.0005,
  noiseIntensity: 0.0005,
  attractionRadius1: 50,
  attractionRadius2: 150,
  maxVelocity: 0.1
})

https://codepen.io/soju22/pen/qBxVXmb (opens in a new tab)

粒子群效果

动态交互粒子群效果，适合多种创意页面或互动场景，增加页面的趣味性与科技感

import { swarmBackground } from 'https://unpkg.com/[email protected]/build/threejs-toys.module.cdn.min.js'
 
const bg = swarmBackground({
  el: document.getElementById('app'),
  eventsEl: document.body,
  gpgpuSize: 256,
    color: [Math.random() * 0xffffff, Math.random() * 0xffffff],
  geometry: 'default'
})
 
bg.three.camera.position.set(0, 0, 200)
 
document.body.addEventListener('click', () => {
  bg.setColors([Math.random() * 0xffffff, Math.random() * 0xffffff])
})

https://codepen.io/soju22/pen/GRQMzBa (opens in a new tab)

动感线条背景

流畅且充满科技感的线条动画背景，点击页面即可随机改变样式，增强交互体验。

import { noisyLinesBackground } from 'https://unpkg.com/[email protected]/build/threejs-toys.module.cdn.min.js'
 
const bg = noisyLinesBackground({
  el: document.getElementById('app'),
  colors: [143811, 10932726],
  minStroke: 0.5,
  maxStroke: 2,
  timeCoef: 0.0002,
  coordScale: 2,
  displacementScale: 0.02
})
 
document.body.addEventListener('click', () => {
  bg.config.colors = [Math.random() * 0xffffff, Math.random() * 0xffffff, Math.random() * 0xffffff]
  bg.config.minStroke = Math.random() * 2
  bg.config.maxStroke = bg.config.minStroke + Math.random() * 5
  bg.drawTexture()
 
  bg.config.timeCoef = 0.000025 + Math.random() * 0.001
  bg.uniforms.uCoordScale.value = 0.5 + Math.random() * 4.5
  bg.uniforms.uDisplacementScale.value = 0.00025 + Math.random() * 0.01
})

粒子光标特效

将普通的鼠标指针变成炫酷的粒子效果，极大提升页面互动的趣味性。

import { particlesCursor } from 'https://unpkg.com/[email protected]/build/threejs-toys.module.cdn.min.js'
 
const pc = particlesCursor({
  el: document.getElementById('app'),
  gpgpuSize: 512,
  colors: [0x00ff00, 0x0000ff],
  color: 0xff0000,
  coordScale: 0.5,
  noiseIntensity: 0.001,
  noiseTimeCoef: 0.0001,
  pointSize: 5,
  pointDecay: 0.0025,
  sleepRadiusX: 250,
  sleepRadiusY: 250,
  sleepTimeCoefX: 0.001,
  sleepTimeCoefY: 0.002
})
 
document.body.addEventListener('click', () => {
  pc.uniforms.uColor.value.set(Math.random() * 0xffffff)
  pc.uniforms.uCoordScale.value = 0.001 + Math.random() * 2
  pc.uniforms.uNoiseIntensity.value = 0.0001 + Math.random() * 0.001
  pc.uniforms.uPointSize.value = 1 + Math.random() * 10
})

https://codepen.io/soju22/pen/KKQaGrE (opens in a new tab)

总结

ThreeJS Toys 提供的组件，让每个前端开发者都能轻松打造令人印象深刻的3D视觉效果，为你的页面注入活力与创意。