移动端项目开发：用Vite + React构建Canvas碰撞特效

2023-10-24 08:28:38

Vite + React初探

Vite是一个现代化的构建工具，用于前端开发。它提供了闪电般的构建速度，热模块替换（HMR）和开箱即用的TypeScript支持。React是一个流行的JavaScript库，用于构建用户界面。它采用组件化和声明式编程，使开发复杂应用程序变得轻而易举。

搭建React移动端项目

首先，使用Vite创建一个新的React项目：

npx create-vite-app <project-name> --template react

然后，安装antd-mobile：

npm install antd-mobile

antd-mobile是一个移动端UI组件库，可帮助您快速构建美观且响应迅速的移动端应用程序。

实现Canvas碰撞特效

接下来，让我们创建Canvas碰撞特效。在App.js文件中，添加以下代码：

import { useEffect, useRef } from 'react';
import { Canvas } from 'react-three-fiber';

const App = () => {
  const canvasRef = useRef();
  const boxRef = useRef();

  useEffect(() => {
    const canvas = canvasRef.current;
    const box = boxRef.current;

    // 创建场景和相机
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 渲染场景
    const renderer = new THREE.WebGLRenderer({ canvas });
    renderer.setSize(window.innerWidth, window.innerHeight);

    // 添加事件监听器，在鼠标移动时移动立方体
    document.addEventListener('mousemove', (event) => {
      box.position.x = event.clientX;
      box.position.y = event.clientY;
    });

    // 动画循环
    function animate() {
      requestAnimationFrame(animate);

      // 碰撞检测
      if (cube.position.x < box.position.x + box.scale.x / 2 &&
          cube.position.x > box.position.x - box.scale.x / 2 &&
          cube.position.y < box.position.y + box.scale.y / 2 &&
          cube.position.y > box.position.y - box.scale.y / 2) {
        cube.material.color.set(0xff0000);
      } else {
        cube.material.color.set(0x00ff00);
      }

      renderer.render(scene, camera);
    }

    animate();

    return () => {
      // 清理事件监听器
      document.removeEventListener('mousemove', (event) => {
        box.position.x = event.clientX;
        box.position.y = event.clientY;
      });
    };
  }, []);

  return (
    <div>
      <Canvas ref={canvasRef}>
        <primitive ref={boxRef} object={box} />
      </Canvas>
    </div>
  );
};

export default App;

这段代码使用Three.js创建一个简单的3D场景，其中一个立方体（cube）在鼠标移动时移动，一个盒子（box）始终跟随鼠标。我们通过比较cube和box的位置来检测碰撞，如果它们相交，则将cube的颜色更改为红色。

适配移动端屏幕

为了确保项目在不同屏幕尺寸上都能完美呈现，我们使用pxtorem将像素单位转换为rem单位。在index.css文件中，添加以下代码：

@import url('https://unpkg.com/antd-mobile/dist/antd-mobile.css');

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  width: 300px;
  height: 300px;
}