🤸🏼🤸🏼🤸🏼兄弟们开源了，用ThreeJS还原小米SU7超跑！

#小米 #su7 #超跑 #官网 #开源

膜拜，respect，逐行解读学习！！！

地址

小米 SU7 网站特效解析 demo

demo 地址：su7-replica.netlify.app/

demo（芙宁娜版）地址：su7-replica.netlify.app/#furina

原网站地址：gamemcu.com/su7/

食用方法

安装依赖

npm i

本地调试

npm run dev

构建

npm run build

预览

npm run preview

复刻版本

📱 开源项目：小米SU7 3D模型展示系统

💥 核心特色：

基于ThreeJS技术，完美还原SU7超跑外观与细节

支持3D视角自由旋转、缩放和各种交互功能

完全开源免费，无任何使用限制

代码结构清晰，适合前端开发者学习与二次开发

🔧 技术栈：Vue + TypeScript + ThreeJS

📂 源码地址：github.com/Yechuanjie/...

🌐 在线预览：su7-replica.netlify.app/

接下来谈谈它的技术栈。

简单看一下，

打开控制台后可以发现它用了WebGL协议，

这是一种用于构建3D场景的Web协议。

同时，我们还能看到他使用的一些插件，

比如GS（可能是Three.js之类的库），

在元素里搜索"GS"就能找到相关代码，

说明它是基于GS构建的。

项目概述

这是一个基于 Vue 3 + TypeScript + Three.js 构建的小米SU7汽车3D展示项目。项目使用现代前端技术栈，通过WebGL技术在浏览器中渲染3D汽车模型。

技术栈分析

核心依赖

• Vue 3.4.21: 前端框架，使用Composition API
• Three.js 0.163.0: 3D图形库，用于WebGL渲染
• TypeScript: 提供类型安全
• Vite: 构建工具和开发服务器
• dat.gui: 调试界面工具
• kokomi.js: Three.js的辅助库

开发工具

• ESLint + Prettier: 代码规范和格式化
• Sass: CSS预处理器
• unplugin-auto-import: 自动导入Vue API

项目结构

src/
├── App.vue          # 根组件，引入SU7组件
├── main.ts          # 应用入口
├── components/
│   └── SU7.vue      # 核心3D展示组件
├── utils/
│   └── resources.ts # 资源管理工具
└── assets/          # 静态资源

public/
├── models/          # 3D模型和纹理资源
│   ├── mesh/        # GLTF模型文件
│   └── texture/     # 纹理贴图
├── jsm/draco/       # DRACO压缩解码器
└── fonts/           # 字体文件

1. 模板结构

<template>
  <div>
    <div ref="su7Ref"></div>
  </div>
</template>

• 使用 ref 获取DOM元素引用，作为Three.js渲染容器

2. 核心导入

import * as THREE from 'three'
import Stats from 'three/examples/jsm/libs/stats.module'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module'

3. 场景初始化 (init 函数)

渲染器设置

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor('#000')
renderer.setSize(window.innerWidth, window.innerHeight)

• 启用抗锯齿
• 设置像素比适配高DPI屏幕
• 黑色背景
• 全屏渲染

场景和环境

const scene = new THREE.Scene()
scene.background = new THREE.Color(0xbfe3dd)  // 淡蓝绿色背景
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(renderer), 0.04).texture

• 使用 RoomEnvironment 创建室内环境光照
• PMREMGenerator 生成预过滤的环境贴图

相机配置

const camera = new THREE.PerspectiveCamera(33.4, window.innerWidth / window.innerHeight, 1, 100)
camera.position.set(0, 0.8, -11)
camera.lookAt(new THREE.Vector3(0, 0.8, 0))

• 透视相机，视野角度33.4度
• 相机位置：稍微抬高，距离汽车11个单位
• 注视点：汽车中心稍微抬高

交互控制

const controls = new OrbitControls(camera, renderer.domElement)
controls.enablePan = false        // 禁用平移
controls.enableDamping = true     // 启用阻尼效果
controls.minPolarAngle = 0.5      // 限制垂直旋转角度
controls.maxPolarAngle = 1.35
controls.zoomSpeed = 1            // 缩放速度

4. 模型加载和处理

GLTF加载器配置

const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/public/jsm/draco/gltf/')
loader.setDRACOLoader(dracoLoader)
loader.setMeshoptDecoder(MeshoptDecoder)

• 支持DRACO几何压缩
• 支持Meshopt压缩
• 显著减少模型文件大小

模型初始化 (initModel 函数)

const initModel = async (model: THREE.Group) => {
  const modelParts: THREE.Object3D[] = []
  model.traverse(obj => {
    modelParts.push(obj)
  })
  
  wheelModel = modelParts[35]  // 获取车轮模型
  
  const aoMap = await loadResourceByName('ut_car_body_ao')
  modelParts.forEach((item: THREE.Mesh) => {
    if (item.isMesh) {
      const mat = item.material as THREE.MeshStandardMaterial
      aoMap && (mat.aoMap = aoMap)  // 应用AO贴图
    }
  })
}

• 遍历模型所有子对象
• 提取车轮模型用于动画
• 加载并应用AO（环境光遮蔽）贴图增强视觉效果

5. 动画系统

车轮旋转动画

const rotateWheel = () => {
  wheelModel?.children.forEach(item => {
    item.rotateZ(-1 * 0.03)  // 车轮旋转
  })
  gridHelper.position.x += -1 * 0.03  // 地面网格移动
}

• 模拟汽车行驶时的车轮旋转
• 地面网格同步移动营造运动感

主渲染循环

const animate = () => {
  animationFrame = requestAnimationFrame(animate)
  const delta = clock.getDelta()
  mixer.update(delta)    // 更新动画混合器
  controls.update()      // 更新控制器
  stats.update()         // 更新性能统计
  rotateWheel()          // 车轮动画
  renderer.render(scene, camera)  // 渲染场景
}

6. 资源管理

文件定义了项目所需的所有3D资源：

export const resources = [
  { name: 'sm_car', type: 'gltfModel', path: '/models/mesh/sm_car.gltf' },
  { name: 'ut_car_body_ao', type: 'texture', path: '/models/texture/t_car_body_AO.raw.jpg' },
  // ... 其他资源
]

7. 生命周期管理

onMounted(() => {
  init()  // 组件挂载后初始化3D场景
})

onUnmounted(() => {
  cancelAnimationFrame(animationFrame)  // 组件卸载时清理动画
})

项目特色功能

1. 高质量3D渲染: 使用PBR材质和环境光照
2. 模型压缩优化: DRACO和Meshopt压缩减少加载时间
3. 流畅交互: OrbitControls提供直观的3D导航
4. 动画效果: 车轮旋转和地面移动模拟行驶
5. 响应式设计: 自适应不同屏幕尺寸
6. 性能监控: 集成Stats.js监控帧率

总结

通过Vue3结合现代Web 3D开发的响应式系统和Three.js的强大渲染能力，创建了一个高质量的汽车展示应用。