相机基础

相机分为正投影相机OrthographiCamera、透视投影相机PerspectCamera、立体相机CuveCamera、基类Camera

正投影相机

可视区域为一个正方体空间。

let camera = new THREE.OrthographicCamera(10, 10, 10, 10, 0.1, 1000);  // 左、右、上、下、近截面、远截面

// 窗口变化时
// 添加自适应
window.addEventListener("resize", () => {
	renderer.setSize(window.innerWidth, window.innerHeight); // 设置canvas画布宽高
	let width = window.innerWidth;
	let height = window.innerHeight;
	let radio = width / height;
	camera.left = -radio * s;
	camera.right = radio * s;
	camera.updateProjectionMatrix(); // 当相机属性发生变化时，需要更新相机投影矩阵
});

包围盒

包围盒是3D模型在空间中的大小，包围盒可以计算模型在空间中的大小，也可以计算模型在空间中的中心点。

const loader = new GLTFLoader();
loader.load("./建筑模型.gltf", gltf => {
	const box = new THREE.Box3();
	// 计算模型的包围盒
	box.expandByObject(gltf.scene);
	console.log("box:", box);
	// 获取包围盒中心
	const center = new THREE.Vector3();
	box.getCenter(center);
	console.log("包围盒中心：", center);
	// 获取包围盒大小
	const size = new THREE.Vector3();
	box.getSize(size);
	console.log("包围盒大小：", size);
	gltf.scene.traverse(item => {
		if (item.isMesh) {
			const material = new THREE.MeshStandardMaterial({
				color: 0xffffff,
				opacity: 0.5,
				transparent: true,
			});
			item.material = material;

			// 模型边界
			const geometry = new THREE.EdgesGeometry(item.geometry)
			const lintMaterial = new THREE.LineBasicMaterial({
				color: 0xffffff,
				linewidth: 1,
			});
			const line = new THREE.LineSegments(geometry, lintMaterial);
			item.add(line);
		}
	});
	scene.add(gltf.scene);

});

OrbitControls操作

1. 禁止平移：controls.enablePan = false;
2. 禁止旋转：controls.enableRotate = false;
3. 禁止缩放：controls.enableZoom = false;
4. 设置最大最小缩放：controls.minDistance = 0.1; controls.maxDistance = 1000;
5. 设置上下旋转范围：controls.minPolarAngle = 0; controls.maxPolarAngle = Math.PI / 2;
6. 设置左右旋转范围：controls.minAzimuthAngle = 0; controls.maxAzimuthAngle = Math.PI;

MapControls：地图控制

用法参考OrbitControls操作

平移：鼠标左键 旋转：鼠标右键 缩放：鼠标滚轮