zjs_project 1 年之前
父节点
当前提交
5d838a6d39
共有 2 个文件被更改,包括 20 次插入18 次删除
  1. 10 9
      src/pages/webgl_rxdz_720/webgl_rxdz_720.vue
  2. 10 9
      src/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue

+ 10 - 9
src/pages/webgl_rxdz_720/webgl_rxdz_720.vue

@@ -168,13 +168,13 @@
 				// gridHelper.position.x = 0;
 				// scene.add(gridHelper);
 				//加载环境720贴图
-				// 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;
-				// });
-				makeShaderCube();
+				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;
+				});
+				// makeShaderCube();
 				// makeInstance();
 				//antialias 这个值得设置为false,不然IOS上截图会失效
 				renderer = that.renderer = new THREE.WebGLRenderer({
@@ -191,8 +191,8 @@
 				controls.maxDistance = radius;
 				// controls.minPolarAngle = 0; // 默认0
 				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI,即可以向下旋转到的视角。
-				controls.enableZoom = true; //启用/禁用摄像机的缩放
-				controls.enablePan = true; //启用/禁用摄像机平移
+				controls.enableZoom = false; //启用/禁用摄像机的缩放
+				controls.enablePan = false; //启用/禁用摄像机平移
 				controls.enableRotate = true; //启用/禁用摄像机水平或垂直旋转
 
 				// 监听相机移动事件-限制只能在当前空间范围内移动
@@ -250,6 +250,7 @@
 			function makeShaderCube() {
 				let loader = new THREE.TextureLoader();
 				let resultTexture = loader.load(that.bgUrl);
+				resultTexture.rotation = -Math.PI; // 将纹理旋转设置为180度
 				// 创建一个ShaderMaterial
 				var material = new THREE.ShaderMaterial({
 					uniforms: {

+ 10 - 9
src/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue

@@ -167,13 +167,13 @@
 				// scene.add(gridHelper);
 				
 				//加载环境720贴图
-				// const loader = new THREE.TextureLoader();
-				// const texture = loader.load(that.bgUrl, () => {
-				// 	const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
-				// 	rt.fromEquirectangularTexture(renderer, texture);
-				// 	scene.background = rt.texture;
-				// });
-				makeShaderCube();
+				const loader = new THREE.TextureLoader();
+				const texture = loader.load(that.bgUrl, () => {
+					const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
+					rt.fromEquirectangularTexture(renderer, texture);
+					scene.background = rt.texture;
+				});
+				// makeShaderCube();
 				//antialias 这个值得设置为false,不然IOS上截图会失效
 				renderer = that.renderer = new THREE.WebGLRenderer({
 					canvas: canvas3d,
@@ -189,8 +189,8 @@
 				controls.maxDistance = radius - 10;
 				// controls.minPolarAngle = 0; // 默认0
 				// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI,即可以向下旋转到的视角。
-				controls.enableZoom = true; //启用/禁用摄像机的缩放
-				controls.enablePan = true; //启用/禁用摄像机平移
+				controls.enableZoom = false; //启用/禁用摄像机的缩放
+				controls.enablePan = false; //启用/禁用摄像机平移
 				controls.enableRotate = true; //启用/禁用摄像机水平或垂直旋转
 
 				// 监听相机移动事件-限制只能在当前空间范围内移动
@@ -218,6 +218,7 @@
 			function makeShaderCube() {
 				let loader = new THREE.TextureLoader();
 				let resultTexture = loader.load(that.bgUrl);
+				resultTexture.rotation = Math.PI; // 将纹理旋转设置为180度
 				// 创建一个ShaderMaterial
 				var material = new THREE.ShaderMaterial({
 					uniforms: {