使用 CSS3DRenderer 制作3D穿梭效果

336 字

2 分钟

使用 CSS3DRenderer 制作3D穿梭效果

2025-01-27

博客

ThreeJS

/

网页动画

前言#

当你想要在浏览器中实现元素由远到近的动画效果的时候，你可以使用 Three.js 的 CSS3DRenderer 来模拟 3D 变换并将其渲染到 HTML DOM 元素上。

开始#

从官方文档的描述中我们可以得知 CSS3DRenderer 的本质是通过CSS3的 transform 属性，将层级的3D变换应用到DOM元素上，这样就可以直接在 HTML DOM 元素上做出 3D 的效果。

NPM 安装#

1
npm install three

导入项目#

1
import * as THREE from "three";
2
import { CSS3DRenderer, CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer.js";

3D穿梭效果示例#

1
import * as THREE from "three";
2
import { CSS3DRenderer, CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer.js";
3

4
const scene = new THREE.Scene();
5
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
6
const renderer = new CSS3DRenderer();
7
const objects: CSS3DObject[] = [];
8

9
initScene();
10
animate();
11

12
function initScene() {
13
  let sceneContainer = document.getElementById("sceneContainer");
14
  if (!sceneContainer) return;
15
  scene.clear();
16
  camera.position.set(0, 0, 3000);
17

18
  renderer.setSize(window.innerWidth, window.innerHeight);
19
  renderer.domElement.style.position = "absolute";
20
  renderer.domElement.style.top = "0";
21
  sceneContainer.appendChild(renderer.domElement);
22

23
  for (let i = 0; i < 50; i++) {
24
    createItem(i);
25
  }
26
}
27

28
function createItem(index: number) {
29
  const element = document.createElement("img");
30
  element.style.borderRadius = "50%";
31
  element.style.width = "30px";
32
  element.style.height = "30px";
33
  element.style.background = "gray";
34
  element.id = `item-${index}`;
35

36
  const cssObject = new CSS3DObject(element);
37
  cssObject.position.set(Math.random() * 200 - 100, Math.random() * 200 - 100, Math.random() * -2000 - 500);
38

39
  scene.add(cssObject);
40
  objects.push(cssObject);
41
}
42

43
function animate() {
44
  objects.forEach((obj) => {
45
    obj.position.z += 10;
46

47
    const distance = Math.abs(camera.position.z - obj.position.z);
48
    const scale = Math.max(0.1, 1 - distance / 5000);
49
    obj.element.style.width = `${30 * scale}px`;
50
    obj.element.style.height = `${30 * scale}px`;
51
    obj.element.style.opacity = `${Math.max(0, 1 - distance / 3000)}`;
52

53
    if (obj.position.z > 3000) {
54
      obj.element.style.opacity = "0";
55
      obj.position.set(Math.random() * 200 - 100, Math.random() * 200 - 100, Math.random() * -2000 - 500);
56
    }
57
  });
58
  renderer.render(scene, camera);
59
  requestAnimationFrame(animate);
60
}