webgl_decals

news2025/1/16 3:02:03

ThreeJS 官方案例学习(webgl_decals)

1.效果图

在这里插入图片描述

2.源码

<template>
	<div>
		<div id="container"></div>
	</div>
</template>
<script>
// 光线投射相关代码 https://threejs.org/docs/index.html#api/zh/core/Raycaster
import * as THREE from 'three';
// 导入控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 引入房间环境,创建一个室内环境
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
// 导入性能监视器
import Stats from 'three/examples/jsm/libs/stats.module.js';
// 导入gltf载入库、模型加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
// 引入模型解压器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
// 引入贴花几何体
import { DecalGeometry } from 'three/examples/jsm/geometries/DecalGeometry.js';
//GUI界面
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import gsap from 'gsap';
export default {
	data() {
		return {
			container: null, //界面需要渲染的容器
			scene: null,	// 场景对象
			camera: null, //相机对象
			renderer: null, //渲染器对象
			controller: null,	// 相机控件对象
			stats: null,// 性能监听器
			mixer: null,//动画混合器
			mesh: null,//导入的模型
			gui: null,//GUI界面
			clock: new THREE.Clock(),// 创建一个clock对象,用于跟踪时间
			raycaster: new THREE.Raycaster(),//光线投射,用于进行鼠标拾取(在三维空间中计算出鼠标移过了什么物体)
			params: null,
			intersection: {
				intersects: false,//是否存在相交的点
				point: new THREE.Vector3(),//相交部分的点(世界坐标)的坐标
				normal: new THREE.Vector3()//相交的面
			},
			mouse: new THREE.Vector2(),//创建鼠标位置。创建一个二维向量为后面 Raycaster 实例调用 .setFromCamera 方法做准备
			intersects: [],//物体和射线的焦点(光线投射与鼠标拾取时相交的物体数组)
			mouseHelper: null,//鼠标定位帮助器
			line: null,//鼠标定位帮助线条
			position: new THREE.Vector3(),//贴花投影器的位置
			orientation: new THREE.Euler(),//贴花投影器的朝向
			size: new THREE.Vector3(10, 10, 10),// 贴花投影器的尺寸
			decals: [],//点击时创建的贴花几何体集合
		};
	},
	mounted() {
		// gui参数(贴花参数)
		this.params = {
			minScale: 10,//最大缩放值
			maxScale: 20,//最小缩放值
			rotate: true,//贴花是否旋转
			clear: () => {
				this.removeDecals();
			}
		}
		this.init()
		this.animate()  //如果引入了模型并存在动画,可在模型引入成功后加载动画
		window.addEventListener("resize", this.onWindowSize)
		let moved = false;//判断是否移动状态
		// controller 控制器存在操作时(物体处于移动中时),moved置为true,不进行相关操作
		this.controller.addEventListener('change', () => { moved = true; });
		window.addEventListener("pointerdown", () => { moved = false })
		window.addEventListener("pointerup", (event) => {
			if (moved === false) {
				this.checkIntersection(event.clientX, event.clientY)
				if (this.intersection.intersects) this.shoot()
			}
		})

		window.addEventListener('pointermove', this.onPointerMove);
	},
	beforeUnmount() {
		console.log('beforeUnmount===============');
		// 组件销毁时置空
		this.container = null
		this.scene = null
		this.camera = null
		this.renderer = null
		this.controller = null
		this.stats = null
		this.mixer = null
		this.model = null//导入的模型
	},
	methods: {
		/**
		* @description 初始化
		 */
		init() {
			this.container = document.getElementById('container')
			this.setScene()
			this.setCamera()
			this.setRenderer()
			this.setController()
			this.addHelper()
			// this.setPMREMGenerator()
			this.setLight()
			this.setGltfLoader()
			this.addStatus()
		},
		/**
		 * @description 创建场景
		 */
		setScene() {
			// 创建场景对象Scene
			this.scene = new THREE.Scene()
			// 设置场景背景
			// this.scene.background = new THREE.Color(0xbfe3dd);
		},
		/**
		 * @description 创建相机
		*/
		setCamera() {
			// 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
			this.camera = new THREE.PerspectiveCamera(60, this.container.clientWidth / this.container.clientHeight, 1, 1000)
			// 设置相机位置
			this.camera.position.z = 120
			// 设置摄像头宽高比例
			this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
			// 设置摄像头投影矩阵
			this.camera.updateProjectionMatrix();
			// 设置相机视线方向
			this.camera.lookAt(new THREE.Vector3(0, 0, 0))// 0, 0, 0 this.scene.position
			// 将相机加入场景
			this.scene.add(this.camera)
		},
		/**
		 * @description 创建渲染器
		 */
		setRenderer() {
			// 初始化渲染器
			this.renderer = new THREE.WebGLRenderer({
				antialias: true,// 设置抗锯齿
				// logarithmicDepthBuffer: true,  // 是否使用对数深度缓存
			})
			// 设置渲染器宽高
			this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
			// 设置渲染器的像素比
			this.renderer.setPixelRatio(window.devicePixelRatio);
			// 是否需要对对象排序
			this.renderer.sortObjects = false;
			// 将渲染器添加到页面
			this.container.appendChild(this.renderer.domElement);
		},
		/**
		 * @description 添加创建控制器
		 */
		setController() {
			this.controller = new OrbitControls(this.camera, this.renderer.domElement);
			// 控制缩放范围
			this.controller.minDistance = 50;
			this.controller.maxDistance = 200;
			//是否开启右键拖拽
			// this.controller.enablePan = false;
			// 阻尼(惯性)
			// this.controller.enableDamping = true; //启用阻尼(惯性)
			// this.controller.dampingFactor = 0.04; //阻尼惯性有多大
			// this.controller.autoRotate = true; //自动围绕目标旋转
			// this.controller.minAzimuthAngle = -Math.PI / 3; //能够水平旋转的角度下限。如果设置,其有效值范围为[-2 * Math.PI,2 * Math.PI],且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。
			// this.controller.maxAzimuthAngle = Math.PI / 3;//水平旋转的角度上限,其有效值范围为[-2 * Math.PI,2 * Math.PI],默认值为无穷大
			// this.controller.minPolarAngle = 1; //能够垂直旋转的角度的下限,范围是0到Math.PI,其默认值为0。
			// this.controller.maxPolarAngle = Math.PI - 0.1; //能够垂直旋转的角度的上限,范围是0到Math.PI,其默认值为Math.PI。
			// 修改相机的lookAt是不会影响THREE.OrbitControls的target的
			// 由于设置了控制器,因此只能改变控制器的target以改变相机的lookAt方向
			// this.controller.target.set(0, 0.5, 0); //控制器的焦点
		},
		/**
		 * @description 创建辅助坐标轴
		 */
		addHelper() {
			// 模拟相机视锥体的辅助对象
			let helper = new THREE.CameraHelper(this.camera);
			// this.scene.add(helper);
			//创建辅助坐标轴、轴辅助 (每一个轴的长度)
			let axisHelper = new THREE.AxesHelper(150);  // 红线是X轴,绿线是Y轴,蓝线是Z轴
			// this.scene.add(axisHelper)
			// 坐标格辅助对象
			let gridHelper = new THREE.GridHelper(100, 30, 0x2C2C2C, 0x888888);
			// this.scene.add(gridHelper);

			this.mouseHelper = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 10), new THREE.MeshNormalMaterial());
			this.mouseHelper.visible = false;
			this.scene.add(this.mouseHelper);
		},
		/**
		 * @description 给场景添加环境光效果
		 */
		setPMREMGenerator() {
			// 预过滤的Mipmapped辐射环境贴图
			const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
			this.scene.environment = pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture;
		},
		/**
		 * @description 设置光源
		 */
		setLight() {
			// 环境光
			const ambientLight = new THREE.AmbientLight(0x666666);
			this.scene.add(ambientLight);
			// 平行光
			const dirLight1 = new THREE.DirectionalLight(0xffddcc, 3);
			dirLight1.position.set(1, 0.75, 0.5);
			this.scene.add(dirLight1);

			const dirLight2 = new THREE.DirectionalLight(0xccccff, 3);
			dirLight2.position.set(- 1, 0.75, - 0.5);
			this.scene.add(dirLight2);
		},
		/**
		 * @description 创建性能监听器
		*/
		addStatus() {
			// 创建一个性能监听器
			this.stats = new Stats();
			// 将性能监听器添加到容器中
			this.container.appendChild(this.stats.dom);
		},
		/**
		* @description 添加创建模型
		*/
		setGltfLoader() {
			let that = this
			// 实例化gltf载入库
			const loader = new GLTFLoader();
			// 实例化draco载入库
			const dracoLoader = new DRACOLoader();
			// 添加draco载入库
			dracoLoader.setDecoderPath("/draco/gltf/");
			// 添加draco载入库
			loader.setDRACOLoader(dracoLoader);

			//创建鼠标定位帮助线条
			const geometry = new THREE.BufferGeometry();
			geometry.setFromPoints([new THREE.Vector3(), new THREE.Vector3()]);
			this.line = new THREE.Line(geometry, new THREE.LineBasicMaterial());
			this.scene.add(this.line);


			// 添加模型
			const textureLoader = new THREE.TextureLoader()//纹理贴图加载器
			const map = textureLoader.load(require("../../../public/model/gltf/LeePerrySmith/Map-COL.jpg"));
			map.colorSpace = THREE.SRGBColorSpace;
			const specularMap = textureLoader.load('../../../public/models/gltf/LeePerrySmith/Map-SPEC.jpg');
			const normalMap = textureLoader.load('../../../public/models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg');
			loader.load('/model/gltf/LeePerrySmith/LeePerrySmith.glb', (gltf) => {
				that.mesh = gltf.scene.children[0];
				that.mesh.material = new THREE.MeshPhongMaterial({
					specular: 0x111111,//材质的高光颜色
					map: map,//颜色贴图
					specularMap: specularMap,//镜面反射贴图
					// normalMap: normalMap,//法线贴图的纹理
					shininess: 25,//高亮的程度
				});
				that.scene.add(that.mesh)
				that.mesh.scale.set(10, 10, 10)
			}, undefined, (err => {
				console.error(err)
			}))


			const gui = new GUI();
			gui.add(this.params, 'minScale', 1, 30);
			gui.add(this.params, 'maxScale', 1, 30);
			gui.add(this.params, 'rotate');
			gui.add(this.params, 'clear');
			gui.open();
		},
		/**
		* @description pointermove 窗口事件
		*/
		onPointerMove(event) {
			if (event.isPrimary) {
				this.checkIntersection(event.clientX, event.clientY);
			}
		},
		/**
		* @description 计算物体和射线之间的焦点
		*/
		// 光线投射相关代码 https://threejs.org/docs/index.html#api/zh/core/Raycaster
		checkIntersection(x, y) {
			if (this.mesh === undefined) return
			// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
			this.mouse.x = (x / window.innerWidth) * 2 - 1;
			this.mouse.y = - (y / window.innerHeight) * 2 + 1;
			// 通过摄像机和鼠标位置更新射线
			this.raycaster.setFromCamera(this.mouse, this.camera);
			// 检测所有在射线与物体之间,包括或不包括后代的相交部分。返回结果时,相交部分将按距离进行排序,最近的位于第一个。
			// intersectObjec()第三个参数 - 结果的目标数组, 如果设置了这个值,则在每次调用之前必须清空这个数组(例如:array.length = 0;)
			this.raycaster.intersectObject(this.mesh, false, this.intersects);
			// 如果存在相交点
			if (this.intersects.length > 0) {
				const p = this.intersects[0].point//相交部分的点(世界坐标)
				this.mouseHelper.position.copy(p);
				this.intersection.point.copy(p);

				const n = this.intersects[0].face.normal.clone();//相交的面
				n.transformDirection(this.mesh.matrixWorld);
				n.multiplyScalar(10);
				n.add(this.intersects[0].point);

				this.intersection.normal.copy(this.intersects[0].face.normal);
				this.mouseHelper.lookAt(n);

				// 设置line焦点
				const positions = this.line.geometry.attributes.position;
				positions.setXYZ(0, p.x, p.y, p.z);
				positions.setXYZ(1, n.x, n.y, n.z);
				positions.needsUpdate = true;

				this.intersection.intersects = true;
				//intersectObjec() 清空数组
				this.intersects.length = 0;
			} else {
				this.intersection.intersects = false;
			}
		},
		/**
		* @description 创建贴花几何体
		*/
		shoot() {
			// 设置贴花几何体的位置、朝向、尺寸
			this.position.copy(this.intersection.point);
			this.orientation.copy(this.mouseHelper.rotation);
			if (this.params.rotate) this.orientation.z = Math.random() * 2 * Math.PI;
			const scale = this.params.minScale + Math.random() * (this.params.maxScale - this.params.minScale);
			this.size.set(scale, scale, scale);

			// 加载纹理贴图
			const textureLoader = new THREE.TextureLoader()//纹理贴图加载器
			const decalDiffuse = textureLoader.load('/textures/decal/decal-diffuse.png');
			decalDiffuse.colorSpace = THREE.SRGBColorSpace;
			const decalNormal = textureLoader.load('/textures/decal/decal-normal.jpg');

			// 设置贴花几何体材质
			const decalMaterial = new THREE.MeshPhongMaterial({
				specular: 0x444444,//材质的高光颜色
				map: decalDiffuse,//颜色贴图
				normalMap: decalNormal,//法线贴图的纹理
				normalScale: new THREE.Vector2(1, 1),//法线贴图对材质的影响程度
				shininess: 30,//高亮的程度
				transparent: true,//材质是否透明,存在map时为true
				depthTest: true,//是否在渲染此材质时启用深度测试
				depthWrite: false,//渲染此材质是否对深度缓冲区有任何影响
				polygonOffset: true,//是否使用多边形偏移
				polygonOffsetFactor: - 4,//多边形偏移系数
				wireframe: false,//渲染为平面多边形
			});
			const material = decalMaterial.clone();
			//设置随机颜色
			material.color.setHex(Math.random() * 0xffffff);
			// 引入贴花物体 DecalGeometry - 贴花几何体
			const m = new THREE.Mesh(new DecalGeometry(this.mesh, this.position, this.orientation, this.size), material);
			// 创建贴花几何体集合数组
			this.decals.push(m);
			// 在场景中添加贴花
			this.scene.add(m);
		},
		/**
		* @description 清除贴花几何体集合
		*/
		removeDecals() {
			this.decals.forEach((d) => {
				this.scene.remove(d);
			});
			this.decals.length = 0;
		},
		/**
		 * @description 监听屏幕的大小改变,修改渲染器的宽高,相机的比例
		*/
		// 窗口变化
		onWindowSize() {
			// 更新摄像头
			this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
			// 更新摄像机的投影矩阵
			this.camera.updateProjectionMatrix();
			//更新渲染器
			this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
			// 设置渲染器的像素比
			this.renderer.setPixelRatio(window.devicePixelRatio)
		},
		/**
		* @description 动画执行函数
		*/
		animate() {
			const delta = this.clock.getDelta();
			// 引擎自动更新渲染器
			requestAnimationFrame(this.animate);
			//update()函数内会执行camera.lookAt(x, y, z)
			this.controller.update(delta);
			// 更新性能监听器
			this.stats.update();
			// 重新渲染场景
			this.renderer.render(this.scene, this.camera);
		},
	},
};
</script>
<style>
#container {
	position: absolute;
	width: 100%;
	height: 100%;
}
</style>


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1791048.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一文了解JVM面试篇(上)

Java内存区域 1、如何解释 Java 堆空间及 GC? 当通过 Java 命令启动 Java 进程的时候,会为它分配内存。内存的一部分用于创建 堆空间,当程序中创建对象的时候,就从对空间中分配内存。GC 是 JVM 内部的一 个进程,回收无效对象的内存用于将来的分配。 2、JVM 的主要组成…

天润融通,荣获2024中国AI应用层创新企业

AI技术发展日新月异&#xff0c;可谓“AI一天&#xff0c;人间一年”。 从2023年到2024年&#xff0c;短短一年的时间&#xff0c;大模型技术的发展就已经逐步从追求“技术突破”转向了追求“应用落地”。如何将大模型的技术与企业的生产、运营、销售等场景结合起来&#xff0…

Vue——子级向父级传递数据(自定义事件)

文章目录 前言子级向父级传递数据实现浏览器效果展示 前言 在上一篇博客中&#xff0c;说到了父级向子级组件中传递对应的数据信息&#xff0c;以及增加传递数据的类型现在、默认值填充等规则。 Vue——组件数据传递与props校验 但使用props只能是单向的数据传递&#xff0c;也…

门外汉一次过软考中级(系统集成项目管理工程师)秘笈,请收藏!

24上软考考试已经结束&#xff0c;24下软考备考又要开启了&#xff01;今年软考发生了改革&#xff0c;很多考试由一年考两次变成了一年考一次&#xff0c;比如高级信息系统项目管理师&#xff0c;比如中级系统集成项目管理工程师&#xff0c;这两科是高、中级里相对简单&#…

vue2的element的table组件使用form校验

1.需求描述 vue2有时候做自增表格el-table&#xff0c;希望能够带一些校验&#xff0c;但又不想手搓校验逻辑&#xff0c;可以借用el-form的校验逻辑。 2.代码处理 1. html <template><div class"sad-cont"><el-form ref"form" :model&…

小程序跳转1688<web-view>无效后的实现

web-view 跳转方式 1&#xff1a;这种方法需要在微信开发平台 -> 开发管理 -> 业务域名中配置好要跳转的网站域名&#xff1b; 2&#xff1a;基本上跳转的网址是第三方就不可以配置&#xff0c;因为配置需要在这个域名中的根目录上放你的验证文件&#xff1b; <web-v…

爬楼梯——动态规划第一步

本问题其实常规解法可以分成多个子问题&#xff0c;爬第 n 阶楼梯的方法数量&#xff0c;等于两个部分之和 爬上 n−1 阶楼梯的方法数量。因为再爬 1 阶就能到第 n 阶爬上 n−2 阶楼梯的方法数量&#xff0c;因为再爬 2 阶就能到第 n 阶 所以我们得到公式 dp[n] dp[n−1] d…

如何卸载360安全卫士

不用像其他教程那么复杂 这篇教程比较友好 1.打开桌面&#xff0c;右键单击快捷方式 选择“打开文件位置” 2.然后&#xff0c;搜uninst.exe 3.运行 4.选择“继续卸载” 5.选择“下一步” 6.选择 “继续卸载” 7.选择“继续卸载” 8.选择“是” 9.静等卸载 10.把卸载程序关…

Element ui图片上传

前言 对于广大小白来说&#xff0c;图片上传简直是上传难&#xff0c;难于上青天&#xff01;废话不多说&#xff0c;步入正题&#xff0c;您就瞧好吧&#xff01; 步骤一&#xff1a;前端使用element ui组件&#xff08;upload上传&#xff09; 我个人喜欢使用第二个组件&a…

【代码随想录】【算法训练营】【第29天】 [491]非递减子序列 [46]全排列 [47]全排列II

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 29&#xff0c;周三&#xff0c;坚持坚持~ 题目详情 [491] 非递减子序列 题目描述 491 非递减子序列 解题思路 前提&#xff1a;组合子集问题&#xff0c;可能有重复元素&#xff0c;收集条…

web刷题记录(3)

[NISACTF 2022]checkin 简单的get传参,好久没做过这么简单的题了 王德发&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff01;&#xff0c;看了源代码以后&#xff0c;本来以为是js脚本的问题&#xff0c;但是禁用js脚本没用&#xff0c;看了大佬的wp以后…

鸿蒙轻内核M核源码分析系列六 任务及任务调度(3)任务调度模块

调度&#xff0c;Schedule也称为Dispatch&#xff0c;是操作系统的一个重要模块&#xff0c;它负责选择系统要处理的下一个任务。调度模块需要协调处于就绪状态的任务对资源的竞争&#xff0c;按优先级策略从就绪队列中获取高优先级的任务&#xff0c;给予资源使用权。本文我们…

面试题------>MySQL!!!

一、连接查询 ①&#xff1a;左连接left join &#xff08;小表在左&#xff0c;大表在右&#xff09; ②&#xff1a;右连接right join&#xff08;小表在右&#xff0c;大表在左&#xff09; 二、聚合函数 SQL 中提供的聚合函数可以用来统计、求和、求最值等等 COUNT&…

Qt 的 d_ptr (d-pointer) 和 q_ptr (q-pointer)解析;Q_D和Q_Q指针

篇一&#xff1a; Qt之q指针&#xff08;Q_Q&#xff09;d指针&#xff08;Q_D&#xff09;源码剖析---源码面前了无秘密_qtq指针-CSDN博客 通常情况下&#xff0c;与一个类密切相关的数据会被作为数据成员直接定义在该类中。然而&#xff0c;在某些场合下&#xff0c;我们会…

【深入学习Redis丨第二篇】Redis集群部署详解

文章目录 Redis集群部署Redis4 Cluster部署 Redis集群部署 1 Redis各节点部署 使用源码安装各节点&#xff0c;不过与非cluster方式不同的是&#xff0c;配置文件中需启动cluster相关的配置。 因本次为伪分布式部署&#xff0c;生产环境部署时建议至少3台机器部署&#xff0…

公园【百度之星】/图论+dijkstra

公园 图论dijkstra #include<bits/stdc.h> using namespace std; typedef long long ll; typedef pair<ll,ll> pii; vector<ll> v[40005]; //a、b、c分别是小度、度度熊、终点到各个点的最短距离 ll a[40005],b[40005],c[40005],dist[40005],st[40005]; void…

搭建基于Django的博客系统数据库迁移从Sqlite3到MySQL(四)

上一篇&#xff1a;搭建基于Django的博客系统增加广告轮播图&#xff08;三&#xff09; 下一篇&#xff1a;基于Django的博客系统之用HayStack连接elasticsearch增加搜索功能&#xff08;五&#xff09; Sqlite3数据库迁移到MySQL 数据库 迁移原因 Django 的内置数据库 SQL…

阿里云私有CA使用教程

点击免费生成 根CA详情 启用根CA -----BEGIN CERTIFICATE----- MIIDpzCCAogAwIBAgISBZ2QPcfDqvfI8fqoPkOq6AoMA0GCSqGSIb3DQEBCwUA MFwxCzAJBgNVBAYTAkNOMRAwDgYDVQQIDAdiZWlqaW5nMRAwDgYDVQQHDAdiZWlq aW5nMQ0wCwYDVQQKDARDU0REMQ0wCwYDVQQLDARDU0REMQswCQYDVQQDDAJDTjA…

CAM350如何快速删除Gerber文件上的东西?

文章目录 CAM350如何快速删除Gerber文件上的东西?CAM350如何快速保存已经修改的Gerber文件? CAM350如何快速删除Gerber文件上的东西? CAM如何导入Gerber文件见此篇 今天遇上了一个删除Gerber文件上部分字母的任务&#xff0c;CAM350只能一点点删除线的操作把我手指头差点按…

如何令谷歌浏览器搜索时,子页面使用新窗口,而不是迭代打开

1 问题描述 工作相关需要常用谷歌浏览器&#xff0c;但是现在设置就是每次搜索后&#xff0c;点击搜索结果进去之后&#xff0c;都会覆盖掉原来的父页面&#xff0c;也就是如果我看完了这个子页面的内容&#xff0c;关掉的话&#xff0c;我就需要重新google.com来一遍。。。很…