轿车3D展示

掘金前端

作者大松鼠君

2025年4月3日 09:56

本文将会以three.js 官网的一个轿车3D展示demo为例，进行讲解。示例具体查看地址：www.yanhuangxueyuan.com/threejs/exa…

车.gif

一、主要开发流程

搭建3D渲染场景
使用 GridHelper 对象，生成网格地板
使用 GLTFLoader 加载轿车模型，并自定义模型材质，可通过颜色选择器操控材质样式
将四个车轮模型保存在wheels对象中，通过改变车轮模型的 rotation.x 属性，让车轮旋转起来，模拟汽车奔跑。

二、查看3D模型

可以使用3D软件或者在线工具，预览轿车模型。这里推荐一个在线地址，用于浏览模型： gltf.nsdt.cloud/

三、绘制网格地板

GridHelper 是 Three.js 里的一个实用工具，用于创建网格辅助线，能在场景中直观地显示网格，辅助你理解和定位物体的位置。
该demo中使用 GridHelper 来模拟地板。

grid = new THREE.GridHelper( 20, 40, 0xffffff, 0xffffff );
grid.material.opacity = 0.2;
grid.material.depthWrite = false;
grid.material.transparent = true;
scene.add( grid );

代码解读：

1. 实例化GridHelper对象

grid = new THREE.GridHelper( 20, 40, 0xffffff, 0xffffff );

参数说明：

第一个参数 20：表示网格的大小（边长），这里意味着创建的网格是一个边长为 20 个单位的正方形区域。
第二个参数 40：表示网格的分割数量，即把整个网格区域在每个方向上平均分割成 40 份，这样会形成更密集的网格线。
第三个参数 0xffffff：指定网格中轴线（穿过网格中心的线）的颜色，0xffffff 代表白色。
第四个参数 0xffffff：指定网格线的颜色，同样是白色。

2. 设置材质透明度

grid.material.opacity = 0.2;

opacity 属性用于设置材质的透明度，取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。这里将透明度设置为 0.2，意味着网格线会呈现出半透明的效果。

3. 禁用深度写入

grid.material.depthWrite = false;

depthWrite 是材质的一个属性，用于控制是否将该材质所渲染的物体的深度信息写入深度缓冲区。
当设置为 false 时，意味着该材质渲染的物体不会影响深度缓冲区，这样可能会使得该物体在渲染时不会被其他物体遮挡，即使从深度上看它应该被遮挡。

4. 启用材质透明效果

grid.material.transparent = true;

transparent 属性用于启用材质的透明效果。当设置为 true 时，材质会根据 opacity 属性的值来呈现透明效果。

四、加载轿车模型，并自定义材质（核心）

下面将会介绍如何使用 Three.js 加载一个 GLTF 格式的汽车模型，并为模型的不同部分（车身、细节、玻璃等）设置不同的材质。同时，允许用户通过改变颜色值来动态改变这些部分的颜色。此外，还为汽车模型添加了底部阴影效果。

1. 定义材质

// 车身材质
const bodyMaterial = new THREE.MeshPhysicalMaterial( {
    color: 0xff0000, // 默认颜色
    metalness: 1.0, // 车外壳金属都
    roughness: 0.5, // 车外壳粗糙度
    clearcoat: 1.0, // 清漆层强度为 1.0，模拟清漆效果
    clearcoatRoughness: 0.03 //清漆层的粗糙度为 0.03
});

// 细节部分（如轮毂、装饰条等）的材质
const detailsMaterial = new THREE.MeshStandardMaterial( {
    color: 0xffffff, 
    metalness: 1.0, 
    roughness: 0.5
});

// 玻璃材质
const glassMaterial = new THREE.MeshPhysicalMaterial( {
    color: 0xffffff, 
    metalness: 0.25, 
    roughness: 0, 
    transmission: 1.0
});

（1） MeshPhysicalMaterial

MeshPhysicalMaterial 是具有有金属度metalness、粗糙度roughness属性的PBR材质。
MeshPhysicalMaterial是基于物理的材质，能够模拟真实世界中的光照和材质交互效果。对于车身材质，使用这种材质可以让车身在不同光照条件下表现出更加逼真的反射、折射、阴影等效果，使车身看起来更有质感和真实感。

（2） MeshStandardMaterial

MeshStandardMaterial也是一种常用的材质，它在计算光照时采用了标准的 PBR（基于物理的渲染）模型，能够提供较为真实的光照效果，同时性能相对较好。对于汽车的细节部分，如轮辋（rim）和装饰条（trim）等，使用MeshStandardMaterial可以在保证视觉效果的同时，减少计算量，提高渲染性能。

2. 模型加载

// 车底部阴影图
const shadow = new THREE.TextureLoader().load( 'models/gltf/ferrari_ao.png' );

// 车3D模型
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );

const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );

loader.load( 'models/gltf/ferrari.glb', function ( gltf ) {
const carModel = gltf.scene.children[ 0 ];
})

汽车底部阴影纹理图：使用 THREE.TextureLoader 加载 ferrari_ao.png 图片
Draco 解码器设置：创建 DRACOLoader 对象并设置解码器路径，用于处理压缩的 GLTF 模型。
GLTF 模型加载：创建 GLTFLoader 对象并设置 Draco 解码器，然后使用 load 方法加载 ferrari.glb 模型。

3. 替换汽车材质，收集车轮

carModel.getObjectByName( 'body' ).material = bodyMaterial;

carModel.getObjectByName( 'rim_fl' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_fr' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_rr' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_rl' ).material = detailsMaterial;
carModel.getObjectByName( 'trim' ).material = detailsMaterial;

carModel.getObjectByName( 'glass' ).material = glassMaterial;

wheels.push(
carModel.getObjectByName( 'wheel_fl' ),
carModel.getObjectByName( 'wheel_fr' ),
carModel.getObjectByName( 'wheel_rl' ),
carModel.getObjectByName( 'wheel_rr' )
);

4. 汽车底部阴影

const mesh = new THREE.Mesh(
    new THREE.PlaneGeometry( 0.655 * 4, 1.3 * 4 ),
    new THREE.MeshBasicMaterial( {
        map: shadow, 
        blending: THREE.MultiplyBlending, 
        toneMapped: false, 
        transparent: true 
    } )
);
mesh.rotation.x = - Math.PI / 2;
mesh.renderOrder = 2;
carModel.add( mesh );

scene.add( carModel );

定义一个网格对象，并将之前加载好的阴影纹理应用到该材质上。
对mesh 沿x轴旋转90度，使其平行于地面

5. 使车轮和地面动起来

function render() {
controls.update();
const time = - performance.now() / 1000;
for ( let i = 0; i < wheels.length; i ++ ) {
wheels[ i ].rotation.x = time * Math.PI * 2;
}
grid.position.z = - ( time ) % 1;
renderer.render( scene, camera );
stats.update();
}

旋转车轮： for循环遍历四个车轮对象，wheels[i].rotation.x 表示第 i 个车轮绕 X 轴的旋转角度
移动网格辅助线：( time ) % 1 计算出 time 的小数部分，取负号后将其赋值给 grid.position.z，使得网格辅助线在 Z 轴上以 1 个单位为周期循环移动，从而产生网格滚动的动画效果

6. 动态更改车模型材质颜色

const bodyColorInput = document.getElementById( 'body-color' );
bodyColorInput.addEventListener( 'input', function () {
bodyMaterial.color.set( this.value );
});

const detailsColorInput = document.getElementById( 'details-color' );
detailsColorInput.addEventListener( 'input', function () {
detailsMaterial.color.set( this.value );
});

const glassColorInput = document.getElementById( 'glass-color' );
glassColorInput.addEventListener( 'input', function () {
glassMaterial.color.set( this.value );
});

通过 color.set方法，修改材质颜色

四、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - car</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
color: #bbbbbb;
background: #333333;
}
a {
color: #08f;
}
.colorPicker {
display: inline-block;
margin: 0 10px
}
</style>
</head>

<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> car materials<br/>
Ferrari 458 Italia model by <a href="https://sketchfab.com/models/57bf6cc56931426e87494f554df1dab6" target="_blank" rel="noopener">vicent091036</a>
<br><br>
<span class="colorPicker"><input id="body-color" type="color" value="#ff0000"></input><br/>Body</span>
<span class="colorPicker"><input id="details-color" type="color" value="#ffffff"></input><br/>Details</span>
<span class="colorPicker"><input id="glass-color" type="color" value="#ffffff"></input><br/>Glass</span>
</div>

<div id="container"></div>

<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>

<script type="module">

import * as THREE from 'three';

import Stats from 'three/addons/libs/stats.module.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';

let camera, scene, renderer;
let stats;

let grid;
let controls;

const wheels = [];

function init() {

const container = document.getElementById( 'container' );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
// setAnimationLoop: 每个可用帧都会调用的函数。 如果传入“null"，所有正在进行的动画都会停止。
renderer.setAnimationLoop( render );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.85; // 色调映射的曝光级别。默认是1
container.appendChild( renderer.domElement );

window.addEventListener( 'resize', onWindowResize );

stats = new Stats();
container.appendChild( stats.dom );

//

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.set( 4.25, 1.4, - 4.5 );

// OrbitControls: 轨道控制器
controls = new OrbitControls( camera, container );
controls.maxDistance = 9; // 能够将相机向外移动多少， 其默认值为Infinity
controls.maxPolarAngle = THREE.MathUtils.degToRad( 90 ); // 你能够垂直旋转的角度的上限，范围是0到Math.PI，其默认值为Math.PI。
controls.target.set( 0, 0.5, 0 );
controls.update();

scene = new THREE.Scene();
scene.background = new THREE.Color( 0x333333 );
// environment: 若该值不为null，则该纹理贴图将会被设为场景中所有物理材质的环境贴图。 然而，该属性不能够覆盖已存在的、已分配给 MeshStandardMaterial.envMap 的贴图。默认为null。
scene.environment = new RGBELoader().load( 'textures/equirectangular/venice_sunset_1k.hdr' );
scene.environment.mapping = THREE.EquirectangularReflectionMapping;
scene.fog = new THREE.Fog( 0x333333, 10, 15 );

// 网格地板
grid = new THREE.GridHelper( 20, 40, 0xffffff, 0xffffff );
grid.material.opacity = 0.2;
grid.material.depthWrite = false;
grid.material.transparent = true;
scene.add( grid );

// materials

const bodyMaterial = new THREE.MeshPhysicalMaterial( {
color: 0xff0000, 
metalness: 1.0, 
roughness: 0.5, 
clearcoat: 1.0, // 清漆层
clearcoatRoughness: 0.03
} );

const detailsMaterial = new THREE.MeshStandardMaterial( {
color: 0xffffff, metalness: 1.0, roughness: 0.5
} );

const glassMaterial = new THREE.MeshPhysicalMaterial( {
color: 0xffffff, metalness: 0.25, roughness: 0, transmission: 1.0
} );

const bodyColorInput = document.getElementById( 'body-color' );
bodyColorInput.addEventListener( 'input', function () {

bodyMaterial.color.set( this.value );

} );

const detailsColorInput = document.getElementById( 'details-color' );
detailsColorInput.addEventListener( 'input', function () {

detailsMaterial.color.set( this.value );

} );

const glassColorInput = document.getElementById( 'glass-color' );
glassColorInput.addEventListener( 'input', function () {

glassMaterial.color.set( this.value );

} );

// Car
// 车底部阴影图
const shadow = new THREE.TextureLoader().load( 'models/gltf/ferrari_ao.png' );

// 车3D模型
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );

const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );

loader.load( 'models/gltf/ferrari.glb', function ( gltf ) {

const carModel = gltf.scene.children[ 0 ];

carModel.getObjectByName( 'body' ).material = bodyMaterial;

carModel.getObjectByName( 'rim_fl' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_fr' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_rr' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_rl' ).material = detailsMaterial;
carModel.getObjectByName( 'trim' ).material = detailsMaterial;

carModel.getObjectByName( 'glass' ).material = glassMaterial;

wheels.push(
carModel.getObjectByName( 'wheel_fl' ),
carModel.getObjectByName( 'wheel_fr' ),
carModel.getObjectByName( 'wheel_rl' ),
carModel.getObjectByName( 'wheel_rr' )
);

// shadow  车底部阴影
const mesh = new THREE.Mesh(
new THREE.PlaneGeometry( 0.655 * 4, 1.3 * 4 ),
new THREE.MeshBasicMaterial( {
map: shadow, 
blending: THREE.MultiplyBlending, 
toneMapped: false, // 定义这个材质是否会被渲染器的toneMapping设置所影响，默认为 true 。
transparent: true // 定义此材质是否透明。这对渲染有影响，因为透明对象需要特殊处理，并在非透明对象之后渲染。设置为true时，通过设置材质的opacity属性来控制材质透明的程度。默认值为false。
} )
);
mesh.rotation.x = - Math.PI / 2;
// renderOrder： 这个值将使得scene graph（场景图）中默认的的渲染顺序被覆盖， 即使不透明对象和透明对象保持独立顺序。 渲染顺序是由低到高来排序的，默认值为0。
mesh.renderOrder = 2;
carModel.add( mesh );

scene.add( carModel );

// 坐标轴
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

} );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function render() {

controls.update();

const time = - performance.now() / 1000;

for ( let i = 0; i < wheels.length; i ++ ) {

wheels[ i ].rotation.x = time * Math.PI * 2;

}

grid.position.z = - ( time ) % 1;

renderer.render( scene, camera );

stats.update();

}

init();

</script>

</body>
</html>

普通视图