前端学习必看：Make Me Pulse 灯泡互动场景重力感应实现方法

npm install three

<script src="node_modules/three/build/three.min.js">script>

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(, window.innerWidth / window.innerHeight, 0.1, );
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function handleMotion(event) {
  const acceleration = event.accelerationIncludingGravity;
  // 这里的acceleration.x、y、z就是重力在三个坐标轴上的分量
}

lightBulb.position.x = Math.max(-, Math.min(, lightBulb.position.x + (acceleration.x * 0.1)));
lightBulb.position.y = Math.max(-, Math.min(, lightBulb.position.y + (acceleration.y * 0.1)));

if (typeof window.DeviceMotionEvent !== 'undefined') {
  // 启用重力感应功能
} else {
  // 提示用户设备不支持
  alert('你的设备不支持重力感应功能');
}

let lastX = , lastY = , lastZ = ;
function handleMotion(event) {
  const acceleration = event.accelerationIncludingGravity;
  const smoothX = lastX * 0.8 + acceleration.x * 0.2;
  const smoothY = lastY * 0.8 + acceleration.y * 0.2;
  // 使用smoothX和smoothY来计算物体运动
  lastX = smoothX;
  lastY = smoothY;
}

let motionData;
function handleMotion(event) {
  motionData = event.accelerationIncludingGravity;
}
function animate() {
  requestAnimationFrame(animate);
  if (motionData) {
    // 使用motionData计算物体运动
    motionData = null; // 处理完数据后清空，避免重复使用
  }
  renderer.render(scene, camera);
}