three.js案例- 线上购车3d展示（源码） 包含内容：1.汽车模型展示；2.汽车换肤；3.轮毂部件更换；4.开关车门动画；5.汽车尺寸测量；6.自动驾驶;7.镜面倒影;8.hdr运用；9.移动端适配； 本商品为html+css+three.js源码

在当今数字化时代，线上购车的 3D 展示为消费者带来了前所未有的直观体验。借助 three.js，我们可以轻松打造出令人惊艳的线上购车 3D 展示场景。今天就来和大家详细唠唠这个 three.js 案例 - 线上购车 3D 展示，还会分享一些关键部分的源码哦。

1. 汽车模型展示

首先要在场景中展示汽车模型，three.js 通过加载外部模型文件来实现这一功能。比如常见的 GLTF 格式模型文件，代码如下：

const loader = new THREE.GLTFLoader();
loader.load( 'carModel.gltf', function ( gltf ) {
    scene.add( gltf.scene );
    // 这里可以对模型的位置、旋转等属性进行调整
    gltf.scene.position.set(0, 0, 0);
    gltf.scene.rotation.set(0, 0, 0);
}, undefined, function ( error ) {
    console.error( error );
} );

这里使用 THREE.GLTFLoader 加载器来加载 carModel.gltf 文件，加载成功后将模型添加到场景 scene 中，并对其位置和旋转进行初始化设置。如果加载过程出现错误，会在控制台打印错误信息。

2. 汽车换肤

汽车换肤功能为用户提供了多样化的选择。实现思路是通过切换模型的材质来达到换肤效果。

// 假设已经有了不同颜色材质的数组
const skinMaterials = [new THREE.MeshStandardMaterial({ color: 0xff0000 }), new THREE.MeshStandardMaterial({ color: 0x00ff00 })];
const carMesh = scene.getObjectByName('carMesh'); // 获取汽车模型的 Mesh 对象
function changeSkin(skinIndex) {
    carMesh.material = skinMaterials[skinIndex];
}

在这段代码中，先定义了一个包含不同颜色材质的数组 skinMaterials，然后通过获取汽车模型的 Mesh 对象，在 changeSkin 函数中根据传入的索引值 skinIndex 切换材质，从而实现汽车换肤。

3. 轮毂部件更换

轮毂部件更换和汽车换肤类似，也是通过更换部件的模型来实现。

// 假设已经加载好了不同款式的轮毂模型数组
const wheelModels = [loadWheelModel1(), loadWheelModel2()];
const wheelMesh = scene.getObjectByName('wheelMesh');
function changeWheel(wheelIndex) {
    // 移除原来的轮毂模型
    scene.remove(wheelMesh);
    // 添加新的轮毂模型
    scene.add(wheelModels[wheelIndex]);
}

这里先定义了不同款式轮毂模型的数组 wheelModels，通过获取当前轮毂的 Mesh 对象，在 changeWheel 函数中先移除原轮毂模型，再添加新的轮毂模型，达到更换轮毂的目的。

4. 开关车门动画

开关车门动画可以为展示增添更多趣味性和真实感。three.js 利用骨骼动画来实现这一效果。

const mixer = new THREE.AnimationMixer(carModel);
const clip = THREE.AnimationClip.findByName(carModel.animations, 'doorOpen');
const action = mixer.clipAction(clip);
function openDoor() {
    action.play();
}
function closeDoor() {
    action.reverse();
}

首先创建一个 AnimationMixer 来管理动画，然后从汽车模型的动画集合中找到名为 doorOpen 的动画剪辑 clip，并创建一个 clipAction。openDoor 函数用于播放开门动画，closeDoor 函数则通过反向播放动画来实现关门效果。

5. 汽车尺寸测量

汽车尺寸测量可以通过计算模型的边界框来实现。

const box = new THREE.Box3().setFromObject(carModel);
const size = new THREE.Vector3();
box.getSize(size);
const length = size.x;
const width = size.y;
const height = size.z;
console.log(`汽车长度: ${length}, 宽度: ${width}, 高度: ${height}`);

这里使用 THREE.Box3 对象来计算汽车模型的边界框，然后通过 getSize 方法获取边界框的尺寸，分别得到汽车的长度、宽度和高度，并在控制台打印出来。

6. 自动驾驶

自动驾驶效果可以通过控制汽车模型的位置和旋转来模拟。

let autoDrive = false;
function startAutoDrive() {
    autoDrive = true;
    const speed = 0.01;
    const targetRotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 2);
    function autoDriveUpdate() {
        if (autoDrive) {
            carModel.position.z -= speed;
            carModel.quaternion.slerp(targetRotation, 0.05);
        }
        requestAnimationFrame(autoDriveUpdate);
    }
    autoDriveUpdate();
}

在这段代码中，定义了一个 autoDrive 标志位来控制自动驾驶的开启和关闭。startAutoDrive 函数中设置了自动驾驶的速度 speed 和目标旋转 targetRotation，然后在 autoDriveUpdate 函数中通过不断改变汽车模型的位置和旋转来模拟自动驾驶，并使用 requestAnimationFrame 实现动画循环。

7. 镜面倒影

镜面倒影效果可以通过渲染目标和反射材质来实现。

const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
const reflectionMaterial = new THREE.MeshStandardMaterial({
    envMap: scene.background,
    reflectivity: 1,
    side: THREE.DoubleSide
});
const groundMesh = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), reflectionMaterial);
groundMesh.rotation.x = -Math.PI / 2;
scene.add(groundMesh);
function renderReflection() {
    renderer.setRenderTarget(renderTarget);
    renderer.render(scene, camera);
    renderer.setRenderTarget(null);
    reflectionMaterial.envMap = renderTarget.texture;
}

首先创建一个 WebGLRenderTarget 作为渲染目标，然后定义一个反射材质 reflectionMaterial，并创建一个平面 groundMesh 作为反射平面。renderReflection 函数中，先将渲染目标设置为 renderTarget 进行一次场景渲染，然后再将渲染目标设为 null，并将渲染结果的纹理设置为反射材质的环境贴图，从而实现镜面倒影效果。

8. HDR 运用

HDR（高动态范围）可以让场景看起来更加真实和生动。

const hdrLoader = new THREE.HDRLoader();
hdrLoader.load('environment.hdr', function (texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    scene.environment = texture;
});

这里使用 THREE.HDRLoader 加载 HDR 环境贴图文件 environment.hdr，加载成功后设置其映射方式，并将其同时设置为场景的背景和环境，使场景能够利用 HDR 效果增强真实感。

9. 移动端适配

为了在移动端也能有良好的展示效果，需要对场景进行适配。

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);

通过监听窗口的 resize 事件，在 onWindowResize 函数中重新设置相机的纵横比和渲染器的尺寸，从而实现移动端适配，确保在不同设备屏幕尺寸下场景都能正常展示。

three.js案例- 线上购车3d展示（源码） 包含内容：1.汽车模型展示；2.汽车换肤；3.轮毂部件更换；4.开关车门动画；5.汽车尺寸测量；6.自动驾驶;7.镜面倒影;8.hdr运用；9.移动端适配； 本商品为html+css+three.js源码

以上就是基于 three.js 的线上购车 3D 展示的主要功能及部分源码分析啦，希望能给大家带来一些启发，让我们一起打造出更炫酷的线上 3D 展示场景。这个案例完整的 html + css + three.js 源码，大家可以进一步研究和优化哦。