Three.js 实现3D汽车展示与颜色定制功能分析

web/2025/9/28 2:18:37/文章来源:href="https://blog.51cto.com/u_16802720/14125683" target="_blank"

Three.js 实现3D汽车展示与颜色定制功能分析

1. 项目概述

这是一个基于 Vue 3 和 Three.js 实现的 3D 汽车展示项目，主要功能包括:

3D 汽车模型展示
实时颜色切换功能
支持模型旋转查看
材质效果定制

2. 效果

Three.js 实现3D汽车展示与颜色定制功能分析_加载

3. 核心功能实现分析

3.1 场景初始化

const initThree = async () => {// 创建场景const scene = new THREE.Scene();scene.background = new THREE.Color(0x787878)// 创建相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 2, 3)// 创建渲染器const renderer = new THREE.WebGLRenderer({antialias: true,})
}

场景初始化包含了：

设置灰色背景
配置透视相机
创建支持抗锯齿的渲染器

3.2 材质设置

项目使用了 MeshPhysicalMaterial 来创建金属材质效果：

const metalMaterial = new THREE.MeshPhysicalMaterial({color: '#5cb4c0',metalness: 1,roughness: 0.5,clearcoat: 1,clearcoatRoughness: 0,
})

材质特性：

metalness: 控制金属感
roughness: 控制粗糙度
clearcoat: 清漆效果
clearcoatRoughness: 清漆粗糙度

3.3 灯光设置

项目使用了多个平行光来创建完整的光照效果：

const light1 = new THREE.DirectionalLight(0xffffff, 1);
light1.position.set(0, 0, 10);
scene.add(light1);
// ... 共设置了7个不同位置的平行光

灯光布局：

从不同角度照射模型
确保模型各个部分都能得到充分照明
增强金属材质的视觉效果

3.4 模型加载

项目支持两种格式的模型加载：

const loadFBXModel = (url) => {return new Promise((resolve, reject) => {const loader = new FBXLoader();loader.load(url,(object) => resolve(object),undefined,(error) => reject(error));});
}const loadGLTFModel = (url) => {return new Promise((resolve, reject) => {const loader = new GLTFLoader();loader.load(url,(object) => resolve(object.scene),undefined,(error) => reject(error));});
}

特点：

封装为 Promise 形式
支持 FBX 和 GLTF 两种格式
统一的错误处理

3.5 颜色切换功能

const setColor = (index) => {selectIndex.value = indexchangeGroupColor(carBody.value, colors.value[index])
}const changeGroupColor = (group, color) => {group.traverse(function (object) {if (object.isMesh) {object.material.color.set(color)}});
}

实现特点：

支持多个预设颜色
递归遍历模型所有网格
实时更新材质颜色

3.6 UI 交互设计

<div class="meun"><h1>汽车颜色选配</h1><div class="color-options"><div :class="index==selectIndex?'active':''" v-for="(item,index) in colors" :key="item" :style="{ backgroundColor: item }"@click="setColor(index)"></div></div>
</div>

交互特点：

简洁的颜色选择界面
当前选中颜色高亮显示
半透明背景增加层次感

4. 实用工具函数

4.1 模型尺寸调整

const setModelSize = (model, targetSize) => {const box = new THREE.Box3().setFromObject(model);const size = box.getSize(new THREE.Vector3());const scale = targetSize / Math.max(size.x, size.y, size.z);model.scale.set(scale, scale, scale);
}

功能：