个人技术分享

 演示地址：产品列表https://threelab.cn/pro/#/carCarme

        从事自动驾驶开发也有几年了，一直在做基于webgl+three三维引擎开发。

在工作中，经常会遇到车辆视角问题，比如 正视角，侧视角，后世界等等，这样来回切换，让展示的效果更炫酷一些。

通过数学计算和three相关的接口结合，计算相关的角度问题。

initSceneMain() {
			this.scene = new THREE.Scene();
			this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);

			this.renderer = new THREE.WebGLRenderer({ antialias: true });

			this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
			this.renderer.toneMappingExposure = 0.85;
			this.renderer.useLegacyLights = false;

			this.renderer.setPixelRatio(window.devicePixelRatio);
			this.renderer.setSize(window.innerWidth, window.innerHeight);
			// document.body.appendChild(this.renderer.domElement);
			document.getElementById("map").appendChild(this.renderer.domElement);

			this.controls = new OrbitControls(this.camera, this.renderer.domElement);



			const ambientLight = new THREE.AmbientLight(0xcccccc);
			this.scene.add(ambientLight);
			var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
			directionalLight.position.set(0, 0, 1000);
			this.scene.add(directionalLight);


			this.camera.up.set(0, 0, 1);
			this.camera.position.z = 5;


			this.controls.addEventListener("start", () => {
				this.isMove = true;
			});
			this.controls.addEventListener("end", () => {
				this.isMove = false;
			});

		},

点击运行后的效果

侧视图

源码获取联系：QQ 2945853209