更新于 

NEXT TO 2037

展示地址

技术栈介绍
  • 网站框架：next-react
  • 动画元素：lottie
  • dom动画：gsap
  • 背景：threejs

3D物体旋转背景

使用threejs创建的场景，
用到的是 官网案例

用滤镜处理多个几何体旋转的场景画面：

  • scene、camera、renderer基配
  • 场景加上fog更有空间景深感
  • 加上环境光和直射光
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    0.01,
    1000
)
camera.position.z = 400
camera.lookAt(0,0,0)
scene.add(camera)

renderer = new THREE.WebGLRenderer({antialias:true})
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0x000000, 1)
renderer.setAnimationLoop(animation)
canvasRef?.current?.appendChild(renderer.domElement)
const fog = new THREE.Fog(0x000000, 1, 1000)
scene.fog = fog

const ambientLight = new THREE.AmbientLight(0xcccccc)
scene.add(ambientLight)
const directionLight = new THREE.DirectionalLight(0xffffff,3)
directionLight.position.set(1,1,1)
scene.add(directionLight)
  • 材质开启 flatShading 逐片元渲染，增强多边体硬朗的印象
  • 创建物体，并进行随机映射：
    • 将物体坐标映射到[-1,1]之间的随机位置
    • 将物体坐标缩放到[0, 400]之间随机的大小
    • 将物体随机缩放[1,50]之间的大小
    • 将物体沿x、y、z轴进行随机旋转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const geometry = new THREE.SphereGeometry(1,4,4)
const material = new THREE.MeshPhongMaterial({
    color:0xffffff,
    flatShading:true
})
object = new THREE.Object3D()
for(let i = 0;i< 100 ; i++){
    const element = new THREE.Mesh(geometry,material)
    // normalize 规范化
    element.position.set(
        Math.random()-0.5,
        Math.random()-0.5,
        Math.random()-0.5,
    ).normalize()
    // 随机映射
    element.position.multiplyScalar(Math.random() * 400)
    const scale = Math.random() * 50
    element.scale.set(scale,scale ,scale)
    element.rotation.set(
        Math.random()*2,
        Math.random()*2,
        Math.random()*2,
    )
    object.add(element)
}
scene.add(object)

RenderPass && EffectComposer

添加2层滤镜：

  • DotScreenShader 点化滤镜
  • RGBShiftShader rgp分离滤镜
1
2
3
4
5
6
7
8
9
10
11
12
composer = new EffectComposer(renderer)
composer.addPass(new RenderPass(scene, camera))
const effect1 = new ShaderPass(DotScreenShader)
effect1.uniforms['scale'].value = 4
composer.addPass(effect1)

const effect2 = new ShaderPass(RGBShiftShader)
effect2.uniforms['amount'].value = 0.003
composer.addPass(effect2)

const effect3 = new OutputPass()
composer.addPass(effect3)

lottie动画

lottie-react

官网文档

为了在react中更方便的使用Lottie，
可以直接安装lottie-react库：

1
npm i lottie-react

lottie组件展示动画需要用到的json动画文件，
可以在 LottieFiles 中获取，
网站中有很多艺术家分享的开源动画。

将动画json文件直接引入，注入Lottie组件的animationData属性中，就能实现lottie动画：

1
2
3
4
5
6
7
import AppleAnimation from './Apple_Animation.json'
import Lottie from 'lottie-react'
export default function Page(){
    return (
        <Lottie animationData={AppleAnimation} />
    )
}

GSAP动画效果

官网介绍

安装gsap库

1
npm i @gsap/react, gsap

注册gsap插件：

1
2
import {gsap} from "gsap";
gsap.registerPlugin(useGSAP);