Three.js加载3d汽车模型增加环境图效果

1.遇到的问题：加载的模型无法实现光鲜亮丽的效果，最初以为是灯光的问题，在调试各种灯光无效后，随考虑其他因素影响的模型的效果，

2.查看其他网站模型的展示后，可能是hdr环境图导致的

<script type="importmap">
		{
			"imports": {
				"three": "../three.js/build/three.module.js"
			}
		}
	</script>
    <script type="module">
		import * as THREE from 'three'
		import Stats from '../three.js/examples/jsm/libs/stats.module.js';
		import { OrbitControls } from '../three.js/examples/jsm/controls/OrbitControls.js';
		import { GLTFLoader } from '../three.js/examples/jsm/loaders/GLTFLoader.js';
		//导入hdr图像加载器
		import { RGBELoader } from "../three.js/examples/jsm/loaders/RGBELoader.js";//rebe加载器

		// 创建场景、相机、渲染器
		var scene = new THREE.Scene();
		scene.background = new THREE.Color( 0x999999 );
		var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
		camera.position.set( 4, 1, 0 );
		camera.lookAt( 0, 0, 0 );
		var renderer = new THREE.WebGLRenderer({logarithmicDepthBuffer: true, antialias:true});
		renderer.setSize(window.innerWidth, window.innerHeight);
		// 阴影
		renderer.shadowMap.enabled = true;
		renderer.outputEncoding = THREE.sRGBEncoding;
		renderer.toneMapping = THREE.ACESFilmicToneMapping  //aces标准
		renderer.toneMappingExposure = 1.2
		document.body.appendChild(renderer.domElement);
		var clickableObjects = [];

		// 创建灯光
		var ambientLight = new THREE.AmbientLight(0xffffff, 2);
		scene.add(ambientLight);
		var directionalLight = new THREE.DirectionalLight(0xffffff, 2);
		directionalLight.position.set(100, 100, 100).normalize();
		directionalLight.castShadow = true;
		scene.add(directionalLight);

		// 加载glb模型
		var loader = new GLTFLoader();
		loader.load('model/911.glb', function(gltf) {
			let model = gltf.scene;
			model.scale.set(1, 1, 1); //设置缩放
			model.traverse(function (object) {
				if ( object.isMesh ) {
					object.castShadow = true;
				}
				if (object.type == 'Object3D')  console.log(object)
			})
			scene.add(model);
			animate();
			var leftDoor = model.getObjectByName('boot003');
			var rightDoor = model.getObjectByName('boot004');
			clickableObjects = [leftDoor, rightDoor];

			document.getElementById('loading').style.display = 'none';
		});

		// 控制器
		let controls = new OrbitControls(camera, renderer.domElement);
		controls.target.set(0, 0, 0);  // 旋转中心点
		controls.enableDamping = true;
		controls.minPolarAngle = 0;
		controls.maxPolarAngle = Math.PI/2;

		let stats = new Stats();
		document.body.appendChild( stats.dom );

		window.addEventListener( 'resize', onWindowResize );

		// 渲染场景
		function animate() {
			requestAnimationFrame( animate );

			controls.update();

			stats.update();

			renderer.render( scene, camera );
		}
		function onWindowResize() {
			renderer.setSize( window.innerWidth, window.innerHeight );
		}

		
    </script>

当没有设置环境图的时候，模型发黑，没有色彩，无法达到生产应用的标准，在加载glb模型之前配置加载hdr环境图的代码后

// 加载hdr环境图
const rgbeLoader = new RGBELoader();
//资源较大，使用异步加载
rgbeLoader.loadAsync("model/venice_sunset_1k.hdr").then((texture) => {
	texture.mapping = THREE.EquirectangularReflectionMapping;
	//将加载的材质texture设置给背景和环境
	// scene.background = texture;
	scene.environment = texture;
});

参考文档（科学上网）：

1.Log in to your Sketchfab account - Sketchfab

2.glTF Viewer 2.0 - 3D模型在线查看 | BimAnt