浏览代码

尝试修改贴图

zjs_project 1 年之前
父节点
当前提交
f3de9cfe3c
共有 1 个文件被更改,包括 58 次插入13 次删除
  1. 58 13
      src/pages/webgl_rxdz_720/webgl_rxdz_720.vue

+ 58 - 13
src/pages/webgl_rxdz_720/webgl_rxdz_720.vue

@@ -130,6 +130,7 @@
 				boundary = null;
 			let stats;
 			let videoMeshGroup = [];
+			let cubeCamera = null;
 			init();
 			// this.clearEvent = clearEvent;
 			// this.attendEvent = attendEvent;
@@ -157,12 +158,13 @@
 				// gridHelper.position.x = 0;
 				// scene.add(gridHelper);
 				//加载环境720贴图
-				const loader = new THREE.TextureLoader();
-				const texture = loader.load(that.bgUrl, () => {
-					const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
+				let loader = new THREE.TextureLoader();
+				let texture = loader.load(that.bgUrl, () => {
+					let rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
 					rt.fromEquirectangularTexture(renderer, texture);
 					scene.background = rt.texture;
 				});
+				// makeInstance(),
 				//antialias 这个值得设置为false,不然IOS上截图会失效
 				renderer = that.renderer = new THREE.WebGLRenderer({
 					canvas: canvas3d,
@@ -178,20 +180,22 @@
 				controls.maxDistance = 30;
 				// controls.minPolarAngle = 0; // 默认0
 				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI,即可以向下旋转到的视角。
-				controls.enableZoom = false; //启用摄像机的缩放
-				controls.enablePan = false; //禁用摄像机平移
-				controls.enableRotate = true; //启用摄像机水平或垂直旋转
+				controls.enableZoom = false; //启用/禁用摄像机的缩放
+				controls.enablePan = false; //启用/禁用摄像机平移
+				controls.enableRotate = true; //启用/禁用摄像机水平或垂直旋转
 
 				// 监听相机移动事件-限制只能在当前空间范围内移动
 				// controls.addEventListener('change', () => {
+				// 	// 获取OrbitControls的缩放值
+				// 	var scale = controls.scale;
 				// 	// 检查相机位置是否超出边界框
-				// 	if (boundary && !boundary.containsPoint(camera.position)) {
-				// 		let clampedPosition = new THREE.Vector3();
-				// 		boundary.clampPoint(camera.position, clampedPosition);
-				// 		if (clampedPosition) {
-				// 			camera.position.copy(clampedPosition);
-				// 		}
-				// 	}
+				// 	// if (boundary && !boundary.containsPoint(camera.position)) {
+				// 	// 	let clampedPosition = new THREE.Vector3();
+				// 	// 	boundary.clampPoint(camera.position, clampedPosition);
+				// 	// 	if (clampedPosition) {
+				// 	// 		camera.position.copy(clampedPosition);
+				// 	// 	}
+				// 	// }
 				// });
 				// camera.lookAt(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
 				if(that.coordinate){
@@ -223,6 +227,41 @@
 					}
 				}, false);
 			}
+			function makeInstance() {
+				// let geometry = new THREE.BoxGeometry(10, 10, 10);
+				// //加载环境720贴图
+				// var loader1 = new THREE.TextureLoader();
+				// var texture1 = loader1.load(that.bgUrl, () => {
+				// 	let cubeRenderTarget  = new THREE.WebGLCubeRenderTarget(texture1.image.height);
+				// 	cubeRenderTarget.fromEquirectangularTexture(renderer, texture1);
+				// 	// scene.background = cubeRenderTarget.texture;
+				// 	// 创建一个立方体贴图相机
+				// 	cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);
+				// 	// 创建材质并应用纹理
+				// 	let material = new THREE.MeshBasicMaterial({ envMap: cubeRenderTarget.texture,side:THREE.BackSide });
+				// 	// const material = new THREE.MeshPhongMaterial({color});
+				// 	let cube = new THREE.Mesh(geometry, material);
+				// 	cube.position.set(0,0,0);
+				// 	scene.add(cube);
+				// });
+				// 创建一个立方体贴图加载器
+				var loader = new THREE.CubeTextureLoader();
+				// 加载Equirectangular map
+				loader.load([
+					'https://dm.static.elab-plus.com/miniProgram/pos-x.jpg',
+					'https://dm.static.elab-plus.com/miniProgram/neg-x.jpg',
+					'https://dm.static.elab-plus.com/miniProgram/pos-y.jpg',
+					'https://dm.static.elab-plus.com/miniProgram/neg-y.jpg',
+					'https://dm.static.elab-plus.com/miniProgram/pos-z.jpg',
+					'https://dm.static.elab-plus.com/miniProgram/neg-z.jpg',
+				], function (texture) {
+				    // 将Equirectangular map 应用到天空盒的材质上
+				    var material = new THREE.MeshBasicMaterial({ envMap: texture,side:THREE.BackSide });
+				    var geometry = new THREE.BoxGeometry(10, 10, 10);
+				    var skybox = new THREE.Mesh(geometry, material);
+				    scene.add(skybox);
+				});
+			}
 			function moreTest(){
 				let data = [
 					{
@@ -485,6 +524,12 @@
 				if(videoMeshGroup){
 					videoMeshGroup.forEach(it=>{it.lookAt(camera.position)})
 				}
+				if(cubeCamera){
+					cubeCamera.update(renderer, scene);
+				}
+				// if(scene.background){
+				// 	scene.background.scale.set(0.5,0.5,0.5)
+				// }
 				renderer.render(scene, camera); //单次渲染
 				requestId = requestAnimationFrame(render, canvas3d);
 			}