轿车3D展示 - 技术栈

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

一、主要开发流程

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

二、查看3D模型

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

三、绘制网格地板

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

该demo中使用 GridHelper 来模拟地板。

js 复制代码

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对象

js 复制代码

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

参数说明：

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

2. 设置材质透明度

js 复制代码

grid.material.opacity = 0.2;

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

3. 禁用深度写入

js 复制代码

grid.material.depthWrite = false;

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

4. 启用材质透明效果

js 复制代码

grid.material.transparent = true;

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

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

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

1. 定义材质

js 复制代码

// 车身材质
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. 模型加载

js 复制代码

// 车底部阴影图
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. 替换汽车材质，收集车轮

js 复制代码

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. 汽车底部阴影

js 复制代码

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. 使车轮和地面动起来

js 复制代码

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. 动态更改车模型材质颜色

js 复制代码

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方法，修改材质颜色

四、完整代码

js 复制代码

<!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>