博客

最近在学习three.js，做了一个汽车展示的案例用来练手，效果如下：

核心功能有以下这些：

1.汽车模型精细展示；

2.车身肤色12种变换；

3.汽车轮毂样式变换；

4.汽车车门、后备箱、天窗开关；

5.汽车尺寸立体展示；

6.汽车启动原地驾驶;

7.汽车车灯开关

8.豪华汽车展厅，镜面倒影实现;

9.hdr运用;

10.移动端适配；

想看车辆动态效果的，可以看视频

视频查看汽车展示效果

核心源代码贴出来一些

function sceneInit() {
	renderer = new THREE.WebGLRenderer({
		canvas: document.querySelector("#cc"),
		antialias: true,
		alpha: true,
	});
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.toneMappingExposure = 0.9;
	renderer.toneMapping = THREE.LinearToneMapping;
	renderer.toneMappingWhitePoint = 1;
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(
		60,
		window.innerWidth / window.innerHeight,
		1,
		6000
	);
	camera.position.set(-1398, 733, 685);
	controls = new THREE.OrbitControls(camera, document.querySelector("#cc"));
	controls.target.set(0, 100, 0);
	clock = new THREE.Clock();
	controls.enableDamping = true;
	controls.dampingFactor = 0.15;
	controls.panSpeed = 0.1;
	controls.zoomSpeed = 0.2;
	controls.rotateSpeed = 0.05;
	controls.enableKeys = false;
	controls.enablePan = false;
	controls.minDistance = 1450;
	controls.maxDistance = isMobile() ? 2500 : 1950;
	controls.minPolarAngle = 0;
	controls.maxPolarAngle = Math.PI * 0.45;
	controls.minAzimuthAngle = -Infinity;
	controls.maxAzimuthAngle = Infinity;
	window.addEventListener("resize", onWindowResize, false);
	lightInit();
	envMaps();
	initSprite();
	$("body").show();
	$("#logoLoading").show();
	modelInit();
	if (!IosOpt()) {
		draw();
	}
	lensflares();
	inintGround();
}




function raycasterShow() {
	animateInit(carModel.scene, carModel.animations);
	document.addEventListener("click", ray);
	document.addEventListener("touchstart", ray);
	scene.getObjectByName("biaozhu14").position.y = 0.06;
	scene.getObjectByName("biaozhu14").material.transparent = true;
	scene.getObjectByName("biaozhu14").material.opacity = 0;
	scene.getObjectByName("biaozhu14").material.alphaTest = 0.05;
	scene.getObjectByName("dimian").position.y = -0.002;
	scene.getObjectByName("dimian").material.color = new THREE.Color(0x000000);
	var clonems = scene.getObjectByName("polySurface3316").material.clone();
	scene.getObjectByName("polySurface3316").material = clonems.clone();
	scene.getObjectByName("polySurface3316").material.roughness = 1;
	scene.getObjectByName("polySurface3316").material.metalness = 0.1;
	scene.getObjectByName("polySurface4326").position.x = -0.002;
	toggleCarColor(2);
	houshi.map(function (f) {
		var o = scene.getObjectByName(f);
		if (!o) {
			return false;
		}
		var m = o.material.clone();
		o.material = m.clone();
		if (o.name == "painta_a31" || o.name == "painta_a34") {
			o.material.color = new THREE.Color(0x525252);
			o.material.envMap = envMapboli;
			o.material.envMapIntensity = 5;
			houshiObj.push(o);
		} else {
			o.material.color = new THREE.Color(0x102);
		}
	});
	scene.getObjectByName("glass_ab11").material.color = new THREE.Color(
		0x202020
	);
	scene.getObjectByName("glass_ab11").material.opacity = 0.85;
	var cloneglass = scene.getObjectByName("glass_a10_cc7").material.clone();
	scene.getObjectByName("glass_a10_cc7").material = clonems.clone();
	scene.getObjectByName("glass_a10_cc7").material.color = new THREE.Color(
		0x000000
	);
	scene.getObjectByName("glass_a10_cc7").material.opacity = 0.75;
	scene.getObjectByName("glass_a10_cc7").material.transparent = true;
	dispose(scene.getObjectByName("glassC_a2"));
	dispose(scene.getObjectByName("glassC_a3"));

	function ray() {
		var Sx = "";
		var Sy = "";
		if (isMobile()) {
			speed.phone = true;
			Sx = event.touches[0].pageX;
			Sy = event.touches[0].pageY;
		} else {
			Sx = event.clientX;
			Sy = event.clientY;
		}
		var x = (Sx / $("#cc").width()) * 2 - 1;
		var y = -(Sy / $("#cc").height()) * 2 + 1;
		var standardVector = new THREE.Vector3(x, y, 0.5);
		var worldVector = standardVector.unproject(camera);
		var ray = worldVector.sub(camera.position).normalize();
		var raycaster = new THREE.Raycaster(camera.position, ray);
		var intersects = raycaster.intersectObjects(Bplace);
		if (intersects.length > 0) {
			var obj = intersects[0].object;
			if (obj.name.indexOf("sprite") != -1) {
				if (!obj.anStats) {
					actions[obj.anType].reset().play();
					obj.anStats = 1;
					tweenPos(obj, obj.vec2);
				} else {
					tweenAn(actions[obj.anType]);
					obj.anStats = 0;
					tweenPos(obj, obj.vec1);
				}
			}
		}
	}
} 

希望能够帮到大家