React+TS+Vite 2+MobX+Three.js 开发指南

2024-01-24 18:17:21

在现代 Web 开发中，React、TypeScript、Vite 2、MobX 和 Three.js 等技术已成为构建交互式且高效的应用程序的强大工具。本文档将详细介绍如何将这些技术集成在一起，以创建基于 React、TS、Vite 2、MobX 和 Three.js 的强大应用程序。

项目初始化和搭建

要开始一个新的项目，请使用以下命令：

npx create-react-app my-project --template @vitejs/app

这将创建一个新的项目，其中包含 Vite 2 作为构建工具。接下来，我们需要安装其他依赖项：

npm install typescript @types/react @types/react-dom three

对于 MobX 状态管理，我们可以安装：

npm install mobx mobx-react

配置 Vite 2

在 vite.config.ts 文件中，我们需要配置 Vite 2 以支持 TypeScript 和 Three.js：

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'three': 'three/build/three.module.js'
    }
  }
})

创建 React 组件

现在我们已经配置好项目，我们可以创建我们的第一个 React 组件：

// App.tsx
import * as THREE from 'three'
import { useEffect, useRef } from 'react'

const App = () => {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!containerRef.current) return

    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    const renderer = new THREE.WebGLRenderer()

    renderer.setSize(window.innerWidth, window.innerHeight)
    containerRef.current.appendChild(renderer.domElement)

    const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
    const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

    scene.add(cube)
    camera.position.z = 5

    function animate() {
      requestAnimationFrame(animate)

      cube.rotation.x += 0.01
      cube.rotation.y += 0.01

      renderer.render(scene, camera)
    }

    animate()

    return () => {
      renderer.dispose()
    }
  }, [])

  return <div ref={containerRef} />
}

export default App