移动端动态网页背景怎么弄？2025 最新免费交互式 3D 背景素材，支持鼠标滑动 / 触摸交互

import * as THREE from 'three';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(, window.innerWidth / window.innerHeight, 0.1, );
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载 3D 背景模型
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', (gltf) => {
  scene.add(gltf.scene);
});

// 相机位置调整
camera.position.z = ;

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼效果，让交互更平滑
controls.dampingFactor = 0.05; // 调整阻尼系数

.fullscreen-element {
  height: dvh; /* 动态撑满可见区域 */
}

const lod = new THREE.LOD();
lod.addLevel(highDetailModel, ); // 近距离使用高精度模型
lod.addLevel(lowDetailModel, ); // 远距离使用低精度模型
scene.add(lod);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xffffff, );
pointLight.position.set(, , );
scene.add(pointLight);

renderer.domElement.addEventListener('touchstart', (event) => {
  const touch = event.touches[];
  const position = new THREE.Vector2();
  position.x = (touch.clientX / window.innerWidth) *  - ;
  position.y = -(touch.clientY / window.innerHeight) *  + ;
  
  // 在触摸位置生成粒子效果
  const particle = new THREE.Mesh(
    new THREE.SphereGeometry(0.1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
  );
  scene.add(particle);
});