Babylon多视图

最新推荐文章于 2024-04-22 17:57:52 发布

古月折口

最新推荐文章于 2024-04-22 17:57:52 发布

阅读量981

点赞数 4

分类专栏： webGL Babylon

本文链接：https://blog.csdn.net/u013172864/article/details/88184094

版权

webGL 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Babylon

2 篇文章 0 订阅

订阅专栏

Babylon.js本身是能够渲染同一场景的多个视图，实现多视图必须满足两点：

1.有源相机

基本上，scene具有activeCamera定义视点的属性。但我们也可以使用以下代码定义真tm多的活动相机：

scene.activeCameras.push(camera1);
scene.activeCameras.push(camera2);
scene.activeCameras.push(camera3);
......

2.视口

多视图多视图顾名思义肯定需要多个相机，那每个相机需要制定一个视口，就成多视图了，代码如下：

camera1.viewport = new BABYLON.Viewport(0.5, 0, 0.5, 1.0);
camera2.viewport = new BABYLON.Viewport(1, 0.5, 1.0);
camera3.viewport = new BABYLON.Viewport(1, 5, 0.5, 1.0);
.......

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
		<script src="https://cdn.babylonjs.com/babylon.js"></script>
		<title>多视图</title>
	<body>
		<style>
			html,
			boby {
				overflow: hidden;
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}

			#canvas {
				width: 100%;
				height: :100%;
				touch-action: none;
			}
		</style>
	</body>
	</head>
	<canvas id="canvas"></canvas>
	<script>
		window.addEventListener('DOMContentLoaded', function() {
			let canvas = document.getElementById('canvas');
			let engine = new BABYLON.Engine(canvas, true);
			var createScene = function() {
				var scene = new BABYLON.Scene(engine);
				scene.clearColor = new BABYLON.Color3(.6, .6, .8);

				// 有源相机1
				var camera1 = new BABYLON.ArcRotateCamera("camera1", 3 * Math.PI / 8, 3 * Math.PI / 8, 15, new BABYLON.Vector3(0,
					2, 0), scene);
				camera1.attachControl(canvas, true);
				camera1.useFramingBehavior = true;
				//有源相机2
				var camera2 = new BABYLON.ArcRotateCamera("camera1", 3 * Math.PI / 8, 5 * Math.PI / 8, 15, new BABYLON.Vector3(0,
					2, 0), scene);
				camera2.attachControl(canvas, true);
				camera2.useFramingBehavior = true;

				// 两个视口
				camera1.viewport = new BABYLON.Viewport(0, 0.5, 1, 1);
				camera2.viewport = new BABYLON.Viewport(0, 0, 1, 0.5);

				scene.activeCameras.push(camera1);
				scene.activeCameras.push(camera2);

				var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
				light1.intensity = 0.7;
				var light2 = new BABYLON.HemisphericLight("light2", new BABYLON.Vector3(-1, -0.5, 0), scene);
				light2.intensity = 0.8;

                //下面都是辅助看效果的
				
				/*********************绘制六个不同色面的cube***************/
				var faceColors = [];
				faceColors[0] = BABYLON.Color3.Blue();
				faceColors[1] = BABYLON.Color3.White()
				faceColors[2] = BABYLON.Color3.Red();
				faceColors[3] = BABYLON.Color3.Black();
				faceColors[4] = BABYLON.Color3.Green();
				faceColors[5] = BABYLON.Color3.Yellow();

				var box = BABYLON.MeshBuilder.CreateBox("Box", {
					faceColors: faceColors,
					size: 2
				}, scene, true);
				box.material = new BABYLON.StandardMaterial("", scene);


				/*****************************************************/

				/***********绘制坐标轴**************************************/
				var showAxis = function(size) {
					var makeTextPlane = function(text, color, size) {
						var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
						dynamicTexture.hasAlpha = true;
						dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);
						var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
						plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
						plane.material.backFaceCulling = false;
						plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
						plane.material.diffuseTexture = dynamicTexture;
						return plane;
					};

					var axisX = BABYLON.Mesh.CreateLines("axisX", [
						new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size,
							0),
						new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
					], scene);
					axisX.color = new BABYLON.Color3(1, 0, 0);
					var xChar = makeTextPlane("X轴", "red", size / 25);
					xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);
					var axisY = BABYLON.Mesh.CreateLines("axisY", [
						new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95,
							0),
						new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
					], scene);
					axisY.color = new BABYLON.Color3(0, 1, 0);
					var yChar = makeTextPlane("Y轴", "green", size / 25);
					yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
					var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
						new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size *
							0.95),
						new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)
					], scene);
					axisZ.color = new BABYLON.Color3(0, 0, 1);
					var zChar = makeTextPlane("Z轴", "blue", size / 25);
					zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
				};

				showAxis(6);

				/***************************************************************/
				return scene;

			}

			let scene = createScene();
			engine.runRenderLoop(function() {
				scene.render();
			});

			window.addEventListener('resize', function() {
				engine.resize();
			});
		});
	</script>
</html>

效果：

古月折口

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Babylon多视图

Babylon.js本身是能够渲染同一场景的多个视图，实现多视图必须满足两点：1.有源相机基本上，scene具有activeCamera定义视点的属性。但我们也可以使用以下代码定义真tm多的活动相机：scene.activeCameras.push(camera1);scene.activeCameras.push(camera2);scene.acti...
复制链接

扫一扫

专栏目录