基于threejs开发自动驾驶模拟系统视图计算

threelab

已于 2025-05-13 16:52:47 修改

阅读量534

点赞数 14

分类专栏： three 文章标签：自动驾驶人工智能机器学习

于 2024-05-20 11:29:45 首次发布

本文链接：https://blog.csdn.net/huhuan123456/article/details/139059721

版权

three 专栏收录该内容

23 篇文章

订阅专栏

演示地址：产品列表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;
			});

		},

点击运行后的效果

侧视图